<template>
    <div class="variableediting">
        <div class="topcon" v-show="dataConfigure">
                <div class="left-nav">
                     <div class="nav-item active">设备模板</div>
                </div>
                <div class="right-btn">
                    <div class="btn-item" @click="exportfnTXT">导出设备模板</div>
                    <!-- GrounpName:[1,2,3,4] -->
                    <div class="btn-item item1" @click="openDaorufn">导入设备模板</div>
                    <!-- webkitdirectory -->
                    <input  type="file" ref="dianfileInput" accept=".txt"  multiple @change="handleFileChange"  style="display: none">
                    
                </div>
        </div>
        <el-dialog width="400px" draggable  title="导入设备模板" :close-on-click-modal='false'
                    v-model="daorushebeimuban">
                    <div class="choicedio">
                        <div class="mydiodiv" style="display: flex;align-items: center;justify-content: center;">
                            <el-button  class="last-el-button" type="primary" style="width:100px" @click="opendaopru(1)">上位机模板</el-button>
                        </div>
                        <div class="mydiodiv" style="margin-top:20px;display: flex;align-items: center;justify-content: center;">
                            <el-button  class="last-el-button" type="primary" style="width:100px" @click="opendaopru(2)">管理机模板</el-button>
                        </div>
                        
                         
                        
                    </div>
                    <div class="el-loading-mask" v-show="isMask">
                        <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>
                    </div>
                    <template #footer>
                                 <div class="dialog-footer">
                                   <el-button  @click="daorushebeimuban = false" class="last-el-button">取 消</el-button>
                                 </div>
                    </template>
        </el-dialog>
        <!-- 选择导入的设备模板 -->
        <el-dialog width="400px" draggable  :title="'选择'+daorudaochuType+'设备模板'" :close-on-click-modal='false'
                    v-model="xuanzedaorushebeimuban">
                    <div class="choicedio">
                        <div style="width:100%;height:500px">
                        <el-scrollbar style="height:calc(100% - 10px);width: 100%;">
                            <el-tree class="filter-tree" :data="daorudataList"  
                                :expand-on-click-node="true" 
                                default-expand-all
                                show-checkbox
                                :props="defaultProps" :highlight-current='true'  ref="treedaoru" 
                            >
                                <template #default="{ node }">
                                                <div class="custom-tree-node" >
                                                        <div style="display: flex;align-items: center;">
                                                            <img src="../assets/btnImg/2.0.png" alt="" v-if="node.data.type =='设备模板' && !node.data.device_group_id">
                                                            <img src="../assets/btnImg/group.png" alt="" v-if="node.data.type =='模板组'">
                                                            <img src="../assets/btnImg/edit.png" alt="" v-if="node.data.device_group_id">
                                                            
                                                            <span style="font-size:12px;color:#1a1a1a;margin-left:4px"> {{ node.label }}</span>
                                                        </div>
                                                </div>
                                </template>
                            </el-tree>
                        </el-scrollbar>
                        </div>
                    </div>
                    <div class="el-loading-mask" v-show="isMask">
                        <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>
                    </div>
                    <template #footer>
                                 <div class="dialog-footer">
                                   <el-button  @click="xuanzedaorushebeimuban = false">取 消</el-button>
                                    <el-button  class="last-el-button" type="primary" @click="handleCheckChange">确 定</el-button>
                                 </div>
                    </template>
        </el-dialog>

        <div class="con" v-show="dataConfigure">
             <div class="left-tree">
                 <div class="tree-top">
                     <span>设备模板列表</span>
                     <div class="ri-btn">
                        <div style="margin-right:8px" @click="addLeftFN('添加模板组')">添加模板组</div>
                        <div  @click="addLeftFN('添加设备模板')">添加设备模板</div>
                     </div>
                 </div>
                 <el-scrollbar style="height:calc(100% - 60px);width: 100%;">
                    <!-- node-key="id" -->
                    <el-tree class="filter-tree" :data="dataList"  
                        :expand-on-click-node="true" 
                        default-expand-all
                        show-checkbox
                        :check-on-click-node="false"
                        :check-on-click-leaf="false"
                        node-key="myid"
                        :props="defaultProps" :highlight-current='true'  ref="tree" 
                        @node-click="handleNodeClick"
                    >
                   <template #default="{ node }">
                                        <div class="custom-tree-node" >
                                                <div style="display: flex;align-items: center;">
                                                    <img src="../assets/btnImg/group.png" alt="" v-if="node.data.type =='模板组'">
                                                    <img src="../assets/btnImg/edit.png" alt="" v-if="node.data.type =='设备模板'">
                                                    <span style="font-size:12px;color:#1a1a1a;margin-left:4px"> {{ node.label }}</span>
                                                </div>
                                            <div class="treeimg">
                                                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                              <img src="../assets/btnImg/edit2.png" alt="" @click.stop="leftEditFN(node)">
                                                </el-tooltip>
                                                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                            <img src="../assets/btnImg/del2.png"  style="margin-left:12px" @click.stop="leftDelFN(node.data)">
                                                </el-tooltip>
                                            </div>
                                        </div>
                                        
                                    </template>
                    </el-tree>
                    </el-scrollbar>
             </div>
             <div class="right-table">
                <div class="tree-top">
                     <span>设备子系列列表</span>
                     <div class="ri-btn">
                        <div @click="deviceDioFN('添加设备子系列')">添加设备子系列</div>
                     </div>
                 </div>
                 <div class="mi-table">
                      <el-table :data="leftTable" height="100%" stripe  style="width: 100%;" >
                                        <el-table-column type="index"  width="50" label="序号" align="center"> </el-table-column>
                                        <el-table-column prop="serial_name"  min-width="120" label="设备子系列名称"> </el-table-column>
                                        <el-table-column prop="serial_type" width="120" label="类型" align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">{{row.serial_type == 2 ? '通用设备' : 'Modbus设备'}}</div>
                                                </template>
                                        </el-table-column>
                                        <el-table-column prop="remark123" width="160" label="操作" fixed="right" align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">
                                                            <el-tooltip class="item" effect="dark" content="数据区" placement="top">
                                                              <img src="../assets/btnImg/data2.png"  @click="getDataList(row)" alt="" style="margin-right:20px">
                                                            </el-tooltip>
                                                             <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                            <img src="../assets/btnImg/edit2.png" alt="" style="margin-right:20px" @click="editDioFN('修改设备子系列',row)">
                                                            </el-tooltip>
                                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                <img src="../assets/btnImg/del2.png" alt="" @click="delDioFN(row)">
                                                              </el-tooltip>
                                                            
                                                    </div>
                                                </template>
                                        </el-table-column>
                                    </el-table>
                </div>
                
             </div>
        </div>
        <div class="con2" v-show="!dataConfigure">
             <div class="datatop">
                 <div class="lefts">
                      <span @click="dataConfigure = true;nowLeftAreaRow = {}">返回上级</span>
                      设备数据配置
                      <input  type="file" ref="EXCELinput" accept=".xlsx,.xls"  @change="importTemplateEXCELinput"  style="display: none">
                      <div class="mybtn item1" style="margin:0px 12px;width:110px" @click="ExportTemplateEXCEL" v-show="nowZixilieRow.serial_type == 1">导出模版(EXCEL)</div>
                      <div class="mybtn item1" style="width:110px" @click="daoruEXCELmoban" v-show="nowZixilieRow.serial_type == 1">导入模版(EXCEL)</div>
                 </div>
                 <div class="right-btn">
                    <div class="btn-item item1" @click="GenerateNum">生成点号</div>
                    <input  type="file" ref="EXCELinputTXT" accept=".txt"  @change="importTemplateTXTinput"  style="display: none">
                    <div class="btn-item item1" v-show="nowZixilieRow.serial_type == 2" @click="daorufnsangliang('模拟量')">导入模拟量</div>
                    <div class="btn-item item1" v-show="nowZixilieRow.serial_type == 2" @click="daorufnsangliang('数字量')">导入数字量</div>
                    <div class="btn-item item1" v-show="nowZixilieRow.serial_type == 2" @click="daorufnsangliang('脉冲量')">导入脉冲量</div>
                 </div>
             </div>
             <div class="con2data">
                 <div class="dataleft">
                     <div class="smalltitle">
                         数据区列表
                         <div class="mybtn" @click="addLeftDataArea">添加数据区</div>
                     </div>
                     <div class="leftcon">
                           <el-scrollbar style="height:calc(100% - 10px);width: 100%;">
                                  <div class="leftitems" v-for="(item,index) in leftDataArea" :key="index">
                                    <!-- active -->
                                       <div :class="['toptitle',{'active':nowLeftAreaRow.myindex == index}]" @click="item.showconFlag = !item.showconFlag;getDataDian(item)">
                                             <div class="tname">
                                                  <img src="../assets/leftmenu/xiala.png" alt="" v-show="!item.showconFlag || !nowLeftAreaRow.myindex == index">
                                                  <img src="../assets/leftmenu/xiala2.png" alt="" v-show="item.showconFlag && nowLeftAreaRow.myindex == index">
                                                  <span>{{nowZixilieRow.serial_type == 2 ? item.name : item.data_area_name}}</span>
                                             </div>
                                             <img src="../assets/btnImg/del2.png" alt="" class="img11" @click.stop="delModbusAreaFn(item)">
                                       </div>
                                       <div class="showcon" v-show="item.showconFlag">
                                             <div class="showinput">
                                                  <div class="input-item" v-if="nowZixilieRow.serial_type == 2">
                                                      <div class="names">名称</div>
                                                       <el-input v-model="item.name"  style="width: 185px;"/>
                                                  </div>
                                                  <div class="input-item" v-if="nowZixilieRow.serial_type != 2">
                                                      <div class="names">名称</div>
                                                       <el-input v-model="item.data_area_name"  style="width: 185px;"/>
                                                  </div>
                                                   <div class="input-item">
                                                      <div class="names">类型</div>
                                                       <el-select v-model="item.area_type" placeholder="请选择" style="width: 185px;">
                                                            <el-option
                                                                v-for="item in dataTypeOption"
                                                                :key="item.value"
                                                                :label="item.name"
                                                                :value="item.value">
                                                                </el-option>
                                                        </el-select>
                                                  </div>
                                                  <div class="input-item" v-if="nowZixilieRow.serial_type != 2">
                                                      <div class="names">地址</div>
                                                       <el-input v-model="item.data_area_addr"  style="width: 185px;"/>
                                                        <!-- <el-checkbox v-model="item.checked" style="margin-left:8px" @change="hexadecimalfn('修改',item.checked,item)"></el-checkbox> <span style="" class="dioleftname">十六进制</span> -->
                                                  </div>
                                                  <div class="input-item" style="height: 22px;" v-if="nowZixilieRow.serial_type != 2">
                                                      <div class="names"></div>
                                                        <el-checkbox v-model="item.checked" style="margin-left:8px" @change="hexadecimalfn('修改',item.checked,item)"></el-checkbox> <span style="" class="dioleftname">十六进制</span>
                                                  </div>
                                                  <div class="input-item" v-if="nowZixilieRow.serial_type != 2">
                                                      <div class="names">读功能码</div>
                                                       <el-input v-model="item.read_code" style="width: 185px;" />
                                                  </div>
                                                  <div class="input-item" v-if="nowZixilieRow.serial_type != 2">
                                                      <div class="names">写功能码</div>
                                                       <el-input v-model="item.write_code"  style="width: 185px;"/>
                                                  </div>
                                                  <div class="input-item" v-if="nowZixilieRow.serial_type != 2">
                                                      <div class="names">长度</div>
                                                       <el-input v-model="item.data_area_len"  style="width: 185px;" placeholder="[字节]"/>
                                                       <!-- <span style="" class="dioleftname">[字节]</span> -->
                                                  </div>
                                                  <div class="input-item" v-if="nowZixilieRow.serial_type != 2">
                                                      <div class="names">单位块长度</div>
                                                       <el-input v-model="item.data_block_len" style="width: 185px;" />
                                                  </div>
                                                  <div class="input-item">
                                                      <div class="names">偏移量</div>
                                                       <el-input v-model="item.data_id_offset"  style="width: 185px;" placeholder="[字节]"/>
                                                       <!-- <span style="" class="dioleftname">[字节]</span> -->
                                                  </div>
                                             </div>
                                             <div class="showbtn">
                                                  <span @click="saveLeftDataArea(item)" style="margin-right: 12px;">保存</span>
                                                  <span style="margin-right: 12px;" v-if="nowZixilieRow.serial_type != 2" @click="calculateDataLength(item)">计算数据长度</span>
                                             </div>
                                       </div>
                                  </div>
                           </el-scrollbar>
                     </div>
                 </div>
                 <div class="dataright">
                    <div class="smalltitle">
                         数据项列表
                          <div class="right-btn">
                             <div class="mybtn" @click="addDataDian('新增')">增加数据项</div>
                             <div class="mybtn item1" @click="batchAddDataDian">批量数据项</div>
                             <div class="mybtn item1" @click="insertDataPoints">插入数据项</div>
                             <div class="btn-item item1" @click="exportToTxt">导出数据项</div>
                             <div class="btn-item del-btn" @click="delMordfn">批量删除</div>
                        </div>
                       
                    </div>
                    <div class="mytable">
                        <el-table :data="rightTable" height="calc(100% - 35px)" stripe  @selection-change="handleSelectionChange" style="width: 100%;" highlight-current-row @row-click='dataDianFn' v-if="nowZixilieRow.serial_type != 2">
                                        <el-table-column type="selection" width="55" align="center"> </el-table-column>
                                        <el-table-column type="index"  width="50" label="序号" align="center"> </el-table-column>
                                        <el-table-column prop="data_name" min-width="120" label="数据项名称"> </el-table-column>
                                        <el-table-column prop="mydatatype" width="90" label="数据类型"> </el-table-column>
                                        <el-table-column prop="mycodify_type" width="90" label="采集类型"> </el-table-column>
                                        <el-table-column prop="coefficient" width="90" label="转换系数"> </el-table-column>
                                        <el-table-column prop="collect_coef" width="90" label="采集系数"> </el-table-column>
                                        <el-table-column prop="area_addr" width="90" label="区内地址" align="center">  </el-table-column>
                                        <el-table-column prop="data_len" width="90" label="数据长度" align="center">  </el-table-column>
                                        <el-table-column prop="start_bit" width="90" label="开始位" align="center">  </el-table-column>
                                        <el-table-column prop="end_bit" width="90" label="结束位" align="center">  </el-table-column>
                                        <el-table-column prop="mydata_encoded" width="135" label="编码类型"> </el-table-column>
                                        <el-table-column prop="remark123" width="135" label="操作" fixed="right" align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">
                                                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                                <img src="../assets/btnImg/edit2.png" alt=""  style="margin-right:20px" @click.stop="editModbusItem_fn(row)">
                                                            </el-tooltip>
                                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                <img src="../assets/btnImg/del2.png" alt="" @click.stop="delModbusItem_fn(row)">
                                                            </el-tooltip>
                                                    </div>
                                                </template>
                                        </el-table-column>
                        </el-table>
                         <el-table :data="rightTable" height="calc(100% - 35px)" stripe  style="width: 100%;"  @selection-change="handleSelectionChange" highlight-current-row @row-click='dataDianFn' v-else>
                                        <el-table-column type="selection" width="55" align="center"> </el-table-column>
                                        <el-table-column type="index"  width="50" label="序号" align="center"> </el-table-column>
                                        <el-table-column prop="name" min-width="120" label="数据项名称"> </el-table-column>
                                        <el-table-column prop="mydatatype" width="90" label="数据类型"> </el-table-column>
                                        <el-table-column prop="mycodify_type" width="90" label="采集类型"> </el-table-column>
                                        <el-table-column prop="coefficient" width="90" label="转换系数"> </el-table-column>
                                        <el-table-column prop="offset" width="90" label="偏移量"> </el-table-column>
                                        <el-table-column prop="decimal" width="90" label="小数点位"> </el-table-column>
                                        <el-table-column prop="memory_cycle" width="90" label="存储周期"> </el-table-column>
                                        <el-table-column prop="zero" width="90" label="零死区"> </el-table-column>
                                        <el-table-column prop="max_value" width="90" label="最大合理值"> </el-table-column>
                                        <el-table-column prop="min_value" width="90" label="最小合理值"> </el-table-column>
                                        <el-table-column prop="remark123" width="135" label="操作" fixed="right" align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">
                                                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                                <img src="../assets/btnImg/edit2.png" alt=""  style="margin-right:20px" @click="editModbusItem_fn(row)">
                                                            </el-tooltip>
                                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                <img src="../assets/btnImg/del2.png" alt="" @click="delModbusItem_fn(row)">
                                                            </el-tooltip>
                                                    </div>
                                                </template>
                                        </el-table-column>
                        </el-table>
                        <div class="bot-btn">
                            <el-scrollbar style="height:100%;width: 100%;">
                                <div class="scr-div">
                                    <div class="left-btn">
                                    
                                    </div>
                                    <div class="right-paging">
                                        <el-pagination @size-change="handleSizeChangejiao" @current-change="handleCurrentChangejiao" background
                                                :current-page="currentPage" :page-sizes="[100]" :page-size="100"
                                                layout="total, sizes, prev, pager, next" :total="total">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-scrollbar>
                        </div>
                    </div>
                    

                 </div>
             </div>
        </div>
         <!-- 导入提示 -->
         <el-dialog width="700px" draggable  title="导入提示"   v-model="daorudiofalse" :close-on-click-modal='false' :show-close='false'>
                    <div class="choicedio">
                         <div class="infoitems" style="font-size:16px">
                            目标已包含名为<span style="font-size:16px;color:#368ed9;margin:0px 6px"> "{{nowdaorunuma}}" </span>的文件
                         </div>
                    </div>
                      <template #footer>
                            <div class="dialog-footer">
                                 <el-button  @click="fugaifn('取消')" type="warning">取消上传</el-button>
                                 <el-button  @click="fugaifn('跳过')">跳 过</el-button>
                                 <el-button  class="last-el-button"  type="primary" @click="fugaifn('覆盖')">覆 盖</el-button>
                            </div>
                    </template> 
         </el-dialog>
         <!-- 添加设备模板/模板组 -->
        <el-dialog width="400px" draggable  :title="addGroudName" :close-on-click-modal='false'
                    v-model="zhuandialogflag">
                    <div class="choicedio">
                        <div class="mydiodiv">
                            <span class="dioleftname dioleftname1">名称</span> <el-input v-model="deviceGroupName"  />
                        </div>
                      
                    </div>
                    <template #footer>
                                 <div class="dialog-footer">
                                   <el-button  @click="zhuandialogflag = false" >取 消</el-button>
                                    <el-button  class="last-el-button" @click="deviceTempFN" type="primary">确 定</el-button>
                                 </div>
                    </template>
                    
                    <div class="el-loading-mask" v-show="diaisMask">
                        <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>
                    </div>
        </el-dialog>
         <!-- 添加设备子系列 -->
        <el-dialog width="400px" draggable  :title="serialType" :close-on-click-modal='false'
                    v-model="deviceDio">
                    <div class="choicedio">
                        <div class="mydiodiv">
                            <span class="dioleftname dioleftname1" style="min-width: 85px;">设备类型</span> 
                             <el-radio v-model="radio" label="2">通用设备</el-radio>
                              <el-radio v-model="radio" label="1">Modbus设备</el-radio>
                        </div>
                        <div class="mydiodiv" style="margin-top:16px;">
                            <span class="dioleftname dioleftname1" style="width: 85px;">设备子系列名称</span> <el-input v-model="typenameSerial"  />
                        </div>
                        <!-- <div class="mydiodiv" style="margin-top:16px;">
                            <span class="dioleftname dioleftname1">起始点号</span> <el-input v-model="typename"  /> <span  class="rightname">[偏移量]</span>
                        </div> -->
                      
                    </div>
                     <template #footer>
                                 <div class="dialog-footer">
                                  <el-button  @click="deviceDio = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="quedingSerialFN" type="primary">确 定</el-button>
                                 </div>
                    </template>
                  
                    
        </el-dialog>
        <!-- 新增修改数据区 -->
        <el-dialog width="950px" draggable  title="新增数据区" :close-on-click-modal='false' v-model="dataAreaFlag">
                            <div class="choicedio shujuqu">
                                <div class="infoitems">
                                    <div class="items itemright">
                                        <div class="leftname"><span>*</span> 数据区名称：</div>
                                        <el-input v-model="tempArea.name"  placeholder="请输入数据区名称" v-show="nowZixilieRow.serial_type == 2"></el-input>
                                        <el-input v-model="tempArea.data_area_name"  placeholder="请输入数据区名称" v-show="nowZixilieRow.serial_type != 2"></el-input>
                                    </div>
                                    <div class="items">
                                        <div class="leftname"><span>*</span> 数据区类型：</div>
                                        <el-select v-model="tempArea.area_type" placeholder="请选择" style="width:100%"> 
                                                        <el-option
                                                        v-for="item in dataTypeOption"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                    </div>
                                </div>
                                <div class="infoitems" v-show="nowZixilieRow.serial_type == 2">
                                    <div class="items itemright">
                                        <div class="leftname"><span>*</span> 数据ID偏移量：</div>
                                        <el-input v-model="tempArea.data_id_offset" placeholder="请输入数据ID偏移量(字节)"></el-input>
                                    
                                    </div>
                                    <div class="items">
                                    
                                    </div>
                                </div>
                                <!-- //modbus设备 -->
                                <div class="infoitems" v-show="nowZixilieRow.serial_type != 2">
                                    <div class="items itemright">
                                        <div class="leftname"><span>*</span> 数据区地址：</div>
                                        <el-input v-model="tempArea.data_area_addr"  placeholder="请输入数据区地址"></el-input>
                                         <el-checkbox v-model="tempArea.checked" style="margin-left:8px" @change="hexadecimalfn('新增',tempArea.checked)"></el-checkbox> <span style="white-space: nowrap;margin-left:4px" class="dioleftname">十六进制</span>
                                    </div>
                                    <div class="items">
                                         <div class="leftname"><span>*</span> 数据单位块长度：</div>
                                        <el-input v-model="tempArea.data_block_len" placeholder="请输入数据单位块长度"></el-input>
                                    </div>
                                   
                                </div>
                                <div class="infoitems" v-show="nowZixilieRow.serial_type != 2">
                                     <div class="items itemright">
                                        <div class="leftname"><span>*</span> 数据区读功能码：</div>
                                        <el-input v-model="tempArea.read_code"  placeholder="请输入数据区读功能码"></el-input>
                                    </div>
                                    <div class="items">
                                       <div class="leftname"><span>*</span> 数据区长度：</div>
                                        <el-input v-model="tempArea.data_area_len" placeholder="请输入数据区长度(字节)"></el-input>
                                    </div>
                                    
                                </div>
                                <div class="infoitems" v-show="nowZixilieRow.serial_type != 2">
                                    <div class="items itemright">
                                         <div class="leftname"><span>*</span> 数据区写功能码：</div>
                                        <el-input v-model="tempArea.write_code" placeholder="请输入数据区写功能码"></el-input>
                                        
                                    </div>
                                    <div class="items">
                                        <div class="leftname"><span>*</span> 数据ID偏移量：</div>
                                        <el-input v-model="tempArea.data_id_offset" placeholder="请输入数据ID偏移量(字节)"></el-input>
                                    </div>
                                </div>
                            </div>
                            <div class="el-loading-mask" v-show="diaisMask">
                                            <div class="el-loading-spinner">
                                            <svg viewBox="25 25 50 50" class="circular">
                                                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                            </svg>
                                </div>
                            </div>
                             <template #footer>
                                 <div class="dialog-footer">
                                  <el-button  @click="dataAreaFlag = false" >取 消</el-button>
                                    <el-button  class="last-el-button" type="primary" @click="saveLeftDataArea(tempArea)">确 定</el-button>
                                 </div>
                    </template>
                        
                            
                            
        </el-dialog>
        <!-- 数据项模板 -->
        <el-dialog width="950px" draggable  :title="nowAddOrEditdian" :close-on-click-modal='false'
                    v-model="shujuxiang">
                    <div class="choicedio shujuxiang">
                        <div class="body-items" >
                          <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 数据项名称：</div>
                                <el-input v-model="modbusItemObj.data_name" v-show="nowZixilieRow.serial_type != 2"/>
                                <el-input v-model="modbusItemObj.name" v-show="nowZixilieRow.serial_type == 2"/>
                            </div>
                             <div class="items itemright">
                                  <div class="leftname"><span>*</span> 数据类型：</div>
                                <el-select v-model="modbusItemObj.data_type" placeholder="请选择">
                                                      <el-option
                                                        v-for="item in dataTypeList"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                </el-select>
                            
                            </div>
                             <div class="items">
                                 <div class="leftname"><span>*</span> 转换系数：</div>
                                 <el-input v-model="modbusItemObj.coefficient" />
                            </div>
                         </div>
                         <!-- modbus设备 -->
                         <div class="infoitems" v-if="nowZixilieRow.serial_type != 2">
                             <div class="items itemright">
                                 

                                 <div class="leftname"><span>*</span> 编码类型：</div>
                                  <el-select v-model="modbusItemObj.data_encoded" placeholder="请选择">
                                                      <el-option                                                 
                                                        v-for="(item) in codifyTypeList"
                                                        :key="item.keymy"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                  </el-select>
                            </div>
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 采集类型：</div>
                                <el-select v-model="modbusItemObj.codify_type" placeholder="请选择" >
                                                      <el-option
                                                        v-for="item in dataTypeList"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                 </el-select>
                            </div>
                             <div class="items">
                               <div class="leftname "><span>*</span> 采集系数：</div>
                                <el-input v-model="modbusItemObj.collect_coef" />
                            </div>
                           
                         </div>
                         <!-- modbus设备 -->
                         <div class="infoitems"  v-if="nowZixilieRow.serial_type != 2">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 区内地址：</div>
                                 <el-input v-model="modbusItemObj.area_addr" />
                            </div>
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 数据长度：</div>
                                <el-input v-model="modbusItemObj.data_len" />
                            </div>
                             <div class="items">
                                <!-- <div class="leftname"><span>*</span> 排序：</div>
                                 <el-input v-model="modbusItemObj.sort" :disabled='nowDatadianedit'/> -->
                            </div>
                           
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                                  <div class="leftname "><span>*</span> 小数点位数：</div>
                                <el-input v-model="modbusItemObj.decimal" />
                            </div>
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 采集类型：</div>
                                <el-select v-model="modbusItemObj.codify_type" placeholder="请选择" >
                                                      <el-option
                                                        v-for="item in dataTypeList"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                 </el-select>
                            </div>
                             <div class="items">
                               <div class="leftname "><span>*</span> 存储周期：</div>
                                <el-input v-model="modbusItemObj.memory_cycle" />
                            </div>
                           
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 应用类型组：</div>
                                <el-select v-model="modbusItemObj.app_type_group" filterable placeholder="请选择" @change="getApplicationTypefn(modbusItemObj.app_type_group);modbusItemObj.app_type = ''">
                                                      <el-option
                                                        v-for="item in typeGroup"
                                                        :key="item.code"
                                                        :label="item.name"
                                                        :value="item.code">
                                                        </el-option>
                                  </el-select>
                            </div>
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 应用类型：</div>
                                <el-select v-model="modbusItemObj.app_type" filterable placeholder="请选择" >
                                                      <el-option
                                                        v-for="item in yingdataTypeList"
                                                        :key="item.code"
                                                        :label="item.name"
                                                        :value="item.code">
                                                        </el-option>
                                </el-select>
                            </div>
                             <div class="items">
                                <div class="leftname "><span>*</span> 偏移量：</div>
                                <el-input v-model="modbusItemObj.offset" />
                            </div>
                         </div>
                         <!-- modbus设备 -->
                         <div class="infoitems" v-if="nowZixilieRow.serial_type != 2">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 开始位：</div>
                                 <el-input v-model="modbusItemObj.start_bit" />
                            </div>
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 结束位：</div>
                                <el-input v-model="modbusItemObj.end_bit" />
                            </div>
                             <div class="items">
                               
                            </div>
                           
                         </div>
                          <!-- <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 越限类型：</div>
                                 <el-select v-model="modbusItemObj.event_over_limit" placeholder="请选择">
                                                      <el-option
                                                        v-for="item in kongarr"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                 </el-select>
                            </div>
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 报警类型：</div>
                                <el-select v-model="modbusItemObj.event_alert_type" placeholder="请选择">
                                                      <el-option
                                                        v-for="item in kongarr"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                </el-select>
                            </div>
                             <div class="items">
                                <div class="leftname"><span>*</span> 排序：</div>
                                 <el-input v-model="modbusItemObj.sort" :disabled='nowDatadianedit'/>
                            </div>
                           
                         </div> -->
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 最大合理值：</div>
                                 <el-input v-model="modbusItemObj.max_value" />
                            </div>
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 最小合理值：</div>
                                <el-input v-model="modbusItemObj.min_value" />
                            </div>
                              <div class="items">
                                <div class="leftname"><span>*</span> 排序：</div>
                                 <el-input v-model="modbusItemObj.sort" :disabled='nowDatadianedit'/>
                            </div>
                           
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname "><span>*</span> 零死区：</div>
                                <el-input v-model="modbusItemObj.zero" />
                            </div>
                             <div class="items itemright">
                            </div>
                              <div class="items">
                            </div>
                           
                         </div>
                         <div class="infoitems">
                             <div class="items shuxing">
                                <div class="leftname">属性：</div>
                                 <el-select v-model="attributeListValue" multiple clearable  placeholder="请选择">
                                                      <el-option
                                                        v-for="item in attributeList"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                </el-select>
                            </div>
                            
                           
                         </div>
                         
                        </div>
                         <div class="el-loading-mask" v-show="diaisMask">
                                            <div class="el-loading-spinner">
                                            <svg viewBox="25 25 50 50" class="circular">
                                                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                            </svg>
                                </div>
                        </div>
                    </div>
                    
                     <template #footer>
                                 <div class="dialog-footer">
                                  <el-button  @click="shujuxiang = false" >取 消</el-button>
                            <el-button  class="last-el-button"  @click="saveRightDataDian" type="primary">确 定</el-button>
                                 </div>
                    </template>
                    
        </el-dialog>
        <!-- 批量增加数据项 -->
        <el-dialog width="800px" draggable  title="批量增加数据项" :close-on-click-modal='false'
                    v-model="batchshujuxiang">
                    <div class="choicedio addpiliang">
                        <div>
                            <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 数据项数目：</div>
                                <el-input v-model="batchDataItem.number" placeholder="[整型数字]"/>
                            </div>
                             <div class="items">
                                
                            </div>

                           </div>
                            <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 数据长度：</div>
                                <!-- <el-input v-model="batchDataItem.data_len"/> -->
                                 <el-select v-model="batchDataItem.data_len" placeholder="请选择">
                                                      <el-option
                                                        v-for="item in data_lenList"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                                  </el-select>
                            </div>
                             <div class="items">
                                <div class="leftname">按位排列：</div>
                                <el-checkbox v-model="batchDataItem.arrangeByPosition" @change="arrangeByPositionfn"></el-checkbox>
                            </div>
                           </div>
                            <div class="infoitems">
                             
                             <div class="items itemright">
                                 <div class="leftname"><span>*</span> 数据类型：</div>
                                <el-select v-model="batchDataItem.data_type" placeholder="请选择" >
                                                      <el-option
                                                        v-for="item in dataTypeList"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                                  </el-select>
                               
                            </div>
                             <div class="items">
                                <div class="leftname"><span>*</span> 采集类型：</div>
                                <el-select v-model="batchDataItem.codify_type" placeholder="请选择" :disabled='batchDataItem.arrangeByPosition'>
                                                      <el-option
                                                        v-for="item in dataTypeList"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                                  </el-select>
                            </div>
                           </div>
                           <div class="infoitems">
                             <div class="items" style="width:100%">
                                 <div class="leftname"><span>*</span> 编码类型：</div>
                                  <el-select v-model="batchDataItem.data_encoded" placeholder="请选择" style="flex:1">
                                                      <el-option                                                 
                                                        v-for="(item) in codifyTypeList"
                                                        :key="item.keymy"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                                  </el-select>
                            </div>
                            
                           </div>
                         </div>
                        <div class="el-loading-mask" v-show="diaisMask">
                                            <div class="el-loading-spinner">
                                            <svg viewBox="25 25 50 50" class="circular">
                                                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                            </svg>
                                </div>
                        </div>
                    </div>
                    
                    <template #footer>
                                 <div class="dialog-footer">
                                 <el-button  @click="batchshujuxiang = false" >取 消</el-button>
                            <el-button  class="last-el-button"  type="primary" @click="batchAddDataxiangFn">确 定</el-button>
                                 </div>
                    </template>
        </el-dialog>
        <!-- 导入EXCEL名称重复提醒 -->
        <el-dialog width="1100px" draggable  title="导入模版(EXCEL)提示"   v-model="daorudiofalseEXCEL" :close-on-click-modal='false'>
                    <div class="choicedio">
                         <div style="color:red;font-size:16px">提示：存在重复名称的数据，只取第一条</div>
                         <div class="mytitle" style="margin-top:8px;margin-bottom:12px">
                                <span></span>数据区重复名称的数据列表
                         </div>
                         <div class="diatable" style="width:100%;height:200px">
                            <el-table :data="repeatDataArea" height="100%" stripe  style="width: 100%;">
                                    <el-table-column type="index"  width="50" label="序号" align="center"> </el-table-column>
                                    <el-table-column prop="名称" min-width="120" label="名称"> </el-table-column>
                                    <el-table-column prop="地址" width="90" label="地址"> </el-table-column>
                                    <el-table-column prop="长度" width="90" label="长度"> </el-table-column>
                                    <el-table-column prop="读功能码" width="90" label="读功能码"> </el-table-column>
                                    <el-table-column prop="写功能码" width="90" label="写功能码"> </el-table-column>
                                    <el-table-column prop="单位块长度" width="90" label="单位块长度"> </el-table-column>
                                    <el-table-column prop="地址偏移量" width="90" label="地址偏移量"> </el-table-column>
                            </el-table>
                             
                         </div>
                         <div class="mytitle" style="margin-top:8px;margin-bottom:12px">
                                <span></span>数据项重复名称的数据列表
                         </div>
                         <div class="diatable" style="width:100%;height:200px">
                            <el-table :data="repeatDataItem" height="100%" stripe  style="width: 100%;">
                                    <el-table-column type="index"  width="50" label="序号" align="center"> </el-table-column>
                                    <el-table-column prop="数据区名称" width="100" label="数据区名称"> </el-table-column>
                                    <el-table-column prop="数据项名称" width="100" label="数据项名称"> </el-table-column>
                                    <el-table-column prop="数据类型" width="90" label="数据类型"> </el-table-column>
                                    <el-table-column prop="采集类型" width="90" label="采集类型"> </el-table-column>
                                    <el-table-column prop="转换系数" width="90" label="转换系数"> </el-table-column>
                                    <el-table-column prop="采集系数" width="90" label="采集系数"> </el-table-column>
                                    <el-table-column prop="区内地址" width="90" label="区内地址"> </el-table-column>
                                    <el-table-column prop="数据长度" width="90" label="数据长度"> </el-table-column>
                                    <el-table-column prop="起始位" width="90" label="起始位"> </el-table-column>
                                    <el-table-column prop="终止位" width="90" label="终止位"> </el-table-column>
                                    <el-table-column prop="数据编码" width="90" label="数据编码"> </el-table-column>
                                    <el-table-column prop="应用类型" width="90" label="应用类型"> </el-table-column>
                                    <el-table-column prop="小数位数" width="90" label="小数位数"> </el-table-column>
                                    <el-table-column prop="最大合理值" width="90" label="最大合理值"> </el-table-column>
                                    <el-table-column prop="最小合理值" width="90" label="最小合理值"> </el-table-column>
                                    <el-table-column prop="偏移量" width="90" label="偏移量"> </el-table-column>
                                    <el-table-column prop="零死区" width="90" label="零死区"> </el-table-column>
                            </el-table>
                             
                         </div>

                    </div>
                      <template #footer>
                            <div class="dialog-footer">
                                 <el-button  @click="daorudiofalseEXCEL = false" type="warning">取消上传</el-button>
                                 <el-button  class="last-el-button"  type="primary" @click="EXCELAPI">确 定</el-button>
                            </div>
                    </template> 
         </el-dialog>


        <div class="el-loading-mask" v-show="isMask">
            <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>
        </div>
    </div>
</template>

<script>
import {findDeviceGroupList,findDeviceGroupListAll,findDeviceTemplate,addDeviceGroup,editDeviceGroup,editDeviceTemplate,DELETEDeviceGroup,DELETEDeviceTemplate,addDeviceTemplate,findDeviceSerial,addSerialType,editSerialType,delSerialType,
findAreaQueryTong,addTongArea,delTongArea,editTongArea,findTongItem,addTongItem,batchAddModbusItem,batchAddTongItem,editTongItem,delTongItem,
findAreaQuery,addModbusArea,editModbusArea,delModbusArea,findModbusItem,editModbusItem,addModbusItem,delModbusItem,delModbusItembatchDelete,delModbusItembatchDeleteCommon} from "../api/dataComparisonApi";
import {commondatatype,commonAppTypeGroup,commonDataCode,importTemplate,importTemplateFile,getSubSeriesList,GenerateNumfn,importExportTemplate} from "../api/Interface";

import { useCounterStore } from '../stores/counter'
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import * as XLSX from "xlsx";  
import * as FileSaver from "file-saver";  

export default {
    data() {
        return {
            multipleSelection:[],
            daorutypeliang:"6",
            daorudiofalseEXCEL:false,
            daorudiofalse:false,
            daorumingchen:[],
            intersection:[],
            chongfuNumIndex:0,
            nowdaorunuma:"",
            daorushebeimuban:false,
            daorushebeimubanType:1,
            xuanzedaorushebeimuban:false,
            daorudataList:[
                {
                    'channelName':"设备模板",
                    'id':'100002',
                    'type':"设备模板",
                    'children':[],
                }
            ],
            leaveFlag:false,
            areaChecked:true,
            dataAreaFlag:false,
            isMask:false,
            diaisMask:false,
            typeGroup:[],//应用类型组
            typeGroupAll:[],//应用类型组
            codifyTypeList:[],//数据编码类型
            yingdataTypeList:[],
            kongarr:[],
            total:0,
            currentPage:1,
            leftTable:[],
            versionsName:"",
            dataList:[],//左边树形结构
            defaultProps: {
                children: 'children',
                label: 'channelName',
            },
            zhuandialogflag:false,//添加设备模板
            addGroudName:"添加模板组",
            leftType:"add",
            deviceGroupName:"",
            leftRow:{},
            deviceDio:false,//添加设备模板
            typename:"",
            radio:"1",
            dataConfigure:true,//数据配置
            nowZixilieRow:{},//当前设备子系列
            checked:true,
            showconFlag:true,
            typenameSerial:"",
            serialType:"",
            //左边数据区数据
            tempArea:{},
            leftDataArea:[],
            dataTypeOption:[
                {
                    'name':"读数据区",
                    'value':0,
                },
                {
                    'name':"写数据区",
                    'value':1,
                },
            ],
            data_lenList:[
                {
                    'name':"1",
                    'value':"1",
                },
                {
                    'name':"2",
                    'value':"2",
                },
                {
                    'name':"3",
                    'value':"3",
                },
                {
                    'name':"4",
                    'value':"4",
                },
                {
                    'name':"5",
                    'value':"5",
                },
                {
                    'name':"6",
                    'value':"6",
                },
                {
                    'name':"7",
                    'value':"7",
                },
                {
                    'name':"8",
                    'value':"8",
                },
            ],
            nowLeftAreaRow:{},//当前的选中的数据区
            //右侧数据点数据
            rightTable:[],//数据点
            rightTableCopy:[],
            nowInsertData:{},//当前需要插入的数据项的位置
            shujuxiang:false,//数据项模板
            nowDatadianedit:false,
            batchshujuxiang:false,//批量增加数据项
            batchDataItem:{
                number:"10",
                data_len:"",
                codify_type:"",
                data_type:"",
                data_encoded:"",
                arrangeByPosition:false,
            },
            modbusItemObj:{
                "name":"",
                'data_name':"",
                "data_type":"",
                "data_encoded":"",
                "coefficient":"",
                "codify_type":"",
                "collect_coef":"",
                "area_addr":"",
                "data_len":"",
                "data_encoded":"",
                "sort":"",
                "offset":"",
                "memory_cycle":"",
                "app_type_group":"",
                "app_type":"",
                "decimal":"",
                "event_over_limit":0,
                "event_alert_type":0,
                "zero":"",
                "start_bit":"",
                "end_bit":"",
                "max_value":"",
                "min_value":"",
                "attributeListValue":[],
            },//数据点数据
            //数据类型
            // dataTypeList:[],
            //属性
            attributeList:[
                {
                    'name':"存盘",
                    'value':"save",
                },
                {
                    'name':"是否取反",
                    'value':"reverse",
                },
                {
                    'name':"声音报警",
                    'value':"audio_alarm",
                },
                {
                    'name':"合理值检查",
                    'value':"value_check",
                },
                {
                    'name':"报警打印",
                    'value':"alarm_print",
                },
                {
                    'name':"更改提示",
                    'value':"change_tip",
                },
                {
                    'name':"手动值",
                    'value':"manual_value",
                },
                {
                    'name':"采样有效",
                    'value':"sampling",
                },
            ],
            attributeListValue:[],
            nowAddOrEditdian:"新增",
            mywenjianname:[],
            daorudaochuType:"导出",
            mywenjianneirong:[],
            ExportEXCELDATADXIANG:[],
            repeatDataArea:[],//重复的数据区
            filterDataAreaArr:[],//过滤掉的数据区
            repeatDataItem:[],//重复的数据项
            filterDataItemArr:[],//过滤掉的数据项
            filterSubseries:[],
            templateNameIndex:0,
            daorudataListArr:[]
            

        };
    },

    mounted() {
        // this.getChannelconfigidleNumberfn()
        // this.getcommondatatype()
        // console.log("数据类型",this.dataTypeList);
        this.getcommonAppTypeGroup()
        this.getcommonDataCode()
         //获取设备组列表
        this.getDeviceGroupApi()
        
    },
    computed: {
       dataTypeList(){
          return useCounterStore().mydataType
       },
    },
    watch: {
      
    },
    beforeRouteLeave(to, from, next) {
     if(this.leaveFlag){
        this.$confirm(`数据区或者数据项有变动，是否要重新生成点号？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                 GenerateNumfn(this.nowZixilieRow.id).then(res => {
                    if(res.code == 200){
                      return  next(); // 继续离开
                    }else {
                        // next(false); // 阻止离开
                        this.$confirm(`重新生成点号失败，是否要强制离开`,'提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(() => {
                           next(); // 继续离开
                        }).catch(() => {
                           next(false); // 阻止离开
                        });
                    }
                })
            }).catch(() => {
             return  next(); // 继续离开
            });
     }else {
       return next(); // 继续离开
     }
     
   },

    methods: {
        arrangeByPositionfn(val){
            // console.log("dataTypeList",this.dataTypeList);
            if(val){
                // codify_type
                this.batchDataItem.codify_type = 0
                this.batchDataItem.data_type = 3
            }
        },
        //导入模拟量/数字量/模拟量
        daorufnsangliang(type){
            if(Object.keys(this.nowLeftAreaRow).length === 0){
                 this.$message({showClose: true,message: '请选择数据区',type: 'warning'});
                return
            }
            // console.log("this.nowLeftAreaRow",this.nowLeftAreaRow);
            // console.log("数据类型",this.dataTypeList);
            if(type == '模拟量'){
                //Single 6
                this.daorutypeliang = 6
            }else if(type == '数字量'){
                //Byte 3
                this.daorutypeliang = 3
            }else if(type == '脉冲量'){
                //Int32 2
                this.daorutypeliang = 2
            }
            this.$refs.EXCELinputTXT.click();
        },
        importTemplateTXTinput(event){
                const file = event.target.files[0]
                if (!file) return
                
                const reader = new FileReader()
                
                reader.onload = (e) => {
                    const content = e.target.result
                    // 按换行符分割文本，并过滤掉空行
                    var arr1 = content.split(/\r?\n/).filter(line => line.trim() !== '')
                    // console.log("导入进来的txt",arr1);
                    this.$refs.EXCELinputTXT.value = ""
                    var dataList = []
                    arr1.forEach((item,index) => {
                        dataList.push({
                            '数据区ID':this.nowLeftAreaRow.id,
                            '数据类型':this.daorutypeliang,
                            '数据项名称':item,
                            'sort':(this.rightTable.length+index+1)
                        })
                    })
                    this.startSequentialRequestsDATAxiang2(dataList)
                }
                
                reader.readAsText(file)
        },
       
        //*查询全部数据项
        async executeRequestsSequentiallyshujuxiang(requests) {
            const results = [];
            for (const request of requests) {
                try {
                const response = await findModbusItem(request.id);
                response.data.forEach(item => item.areaName = request.data_area_name)
                results.push(response.data);
                } catch (error) {
                }
            }
            return results;
        },
        // *查询全部数据项
        async startSequentialRequestsshujixiang(requestList) {
            // this.isMask = true;
            const results = await this.executeRequestsSequentiallyshujuxiang(requestList);
            // console.log("循环查询数据项",results);
            this.ExportEXCELDATADXIANG = results
            // this.isMask = false;
            // 处理最终结果
        },
        //导出设备模版EXCEL
        async ExportTemplateEXCEL(){
            // console.log("设备子系列",this.leftTable);
            // console.log("数据区",this.leftDataArea);
            var tableData11 = []
            this.leftDataArea.forEach(item => {
                 tableData11.push({
                    '名称':item.data_area_name,
                    '地址':item.exportdata_area_addr,
                    '长度':item.data_area_len,
                    '读功能码':item.read_code,
                    '写功能码':item.write_code,
                    '单位块长度':item.data_block_len,
                    '地址偏移量':item.data_id_offset,
                 })
            })
           
            var tableData22 = [
                
            ]
            await this.startSequentialRequestsshujixiang(this.leftDataArea)

            //查询数据项
            // findModbusItem(row.id).then(res => {})
            // console.log("循环完毕数据项",this.ExportEXCELDATADXIANG)
            var shujuxiangArr = []
            this.ExportEXCELDATADXIANG.forEach(item => {
                shujuxiangArr = shujuxiangArr.concat(item)
            })
            // console.log("合并数据",shujuxiangArr);
            shujuxiangArr.forEach(item => {
                 tableData22.push({
                    '数据区名称':item.areaName,
                    '数据项名称':item.data_name,
                    '数据类型':item.data_type,
                    '采集类型':item.codify_type,
                    '转换系数':item.coefficient,
                    '采集系数':item.collect_coef,
                    '区内地址':item.area_addr,
                    '数据长度':item.data_len,
                    '起始位':item.start_bit,
                    '终止位':item.end_bit,
                    '数据编码':item.data_encoded,
                    '应用类型':item.app_type,
                    '小数位数':item.decimal,
                    '最大合理值':item.max_value,
                    '最小合理值':item.min_value,
                    '偏移量':item.offset,
                    '零死区':item.zero,
                 })
            })

            var tableData33 =  []
              // 添加数据类型区块
            tableData33.push(['数据类型：', ''])
            tableData33.push(['编码', '名称'])
            this.dataTypeList.forEach(item => {
                tableData33.push([item.value, item.name])
            })
            
            // 添加空行
            for (let i = 0; i < 3; i++) {
                tableData33.push(['', ''])
            }
            
            // 添加数据编码区块
            tableData33.push(['数据编码：', ''])
            tableData33.push(['编码', '名称'])
            this.codifyTypeList.forEach(item => {
                tableData33.push([item.value, item.name])
            })
            
            
             // 1. 创建工作簿
            const workbook = XLSX.utils.book_new();

            // 2. 将数组对象转换为工作表
            const worksheet = XLSX.utils.json_to_sheet(tableData11);

            const worksheet2 = XLSX.utils.json_to_sheet(tableData22);

            // const worksheet3 = XLSX.utils.json_to_sheet(tableData33);
            const worksheet3 = {};
             // 4. 从A1开始填充数据
            tableData33.forEach((row, rowIndex) => {
                row.forEach((cellValue, colIndex) => {
                const cellAddress = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex })
                // 只有当cellValue不是空字符串时才创建单元格
                if (cellValue !== '') {
                    worksheet3[cellAddress] = { v: cellValue, t: 's' }
                }
                })
            })
            
            // 5. 设置工作表范围（从A1开始）
            const endRow = tableData33.length - 1
            const endCol = Math.max(...tableData33.map(row => row.length)) - 1
            worksheet3['!ref'] = XLSX.utils.encode_range({
                s: { r: 0, c: 0 },  // 从A1开始
                e: { r: endRow, c: endCol }
            })
             // 自定义列宽
            worksheet['!cols'] = [
                { wch: 20 }, 
                { wch: 7 },  
                { wch: 7 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
            ];
             // 自定义列宽
            worksheet2['!cols'] = [
                { wch: 15 }, 
                { wch: 20 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 15 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 10 },  
                { wch: 12 },  
                { wch: 12 },  
                { wch: 10 },  
                { wch: 10 },  
            ];

             // 5. 设置列宽
            worksheet3['!cols'] = [
                { wch: 10 },  // 第一列宽度
                { wch: 40 }   // 第二列宽度
            ]

            // 3. 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbook, worksheet, "数据区信息");
            XLSX.utils.book_append_sheet(workbook, worksheet2, "数据项信息");
            XLSX.utils.book_append_sheet(workbook, worksheet3, "代码表");

            // 4. 生成 Excel 文件并下载
            const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
            const blob = new Blob([excelBuffer], { type: "application/octet-stream" });
            saveAs(blob, this.nowZixilieRow.serial_name+".xlsx");

        },
        //导入设备模版EXCEL
        daoruEXCELmoban(){
            this.$confirm(`导入将会冲掉原来的，确定导入？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                 this.$refs.EXCELinput.click();          
            }).catch(() => {
              // ...
            });
            
        },
        //找出数组对象名字属性相同的数据
        findAllDuplicateObjects(arr,type) {
            if(type == '数据区'){
                var typename = '名称'
            }else {
                 var typename = '数据项名称'
            }
            const nameCount = arr.reduce((acc, obj) => {
                 acc[obj[typename]] = (acc[obj[typename]] || 0) + 1;
                 return acc;
            }, {});
            return arr.filter(obj => nameCount[obj[typename]] > 1);
        },
        //过滤掉重复的数据
        filterUniqueByName(arr,type) {
            if(type == '数据区'){
                var typename = '名称'
            }else {
                 var typename = '数据项名称'
            }
        const seen = {};
            return arr.filter(item => {
                const name = item[typename];
                if (!seen[name]) {
                seen[name] = true;
                return true;
                }
                if(type == '数据项' && name == '备用'){
                    return true
                }else {
                    return false;
                }
            });
        },
        importTemplateEXCELinput(event){
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = (e) => {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: 'array' });

                // 获取第一个工作表(数据区)
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];

                // 获取第二个工作表(数据项)
                const firstSheetName2 = workbook.SheetNames[1];
                const worksheet2 = workbook.Sheets[firstSheetName2];

                // 转换为 JSON
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: '' })
                // console.log("获取第一个工作表的内容也就是数据区",jsonData);
                var jsonData2 = XLSX.utils.sheet_to_json(worksheet2, { defval: '' })

                // 存在相同的数据区
                const duplicates = this.findAllDuplicateObjects(jsonData,'数据区');
                // console.log("存在相同的数据区",duplicates);
                if(duplicates.length != 0){
                    this.daorudiofalseEXCEL = true
                }
                this.repeatDataArea = duplicates
                var filterDataArea = this.filterUniqueByName(jsonData,'数据区')
                // console.log("过滤掉的数据区",filterDataArea);
                this.filterDataAreaArr = filterDataArea


                
                //数据项
                // console.log("先获取数据项",jsonData2);
                //第一步：先根据数据区名称来把数据项分为二维数组
                const mapArr = new Map();
                jsonData2.forEach(item => {
                const type = item['数据区名称'];
                if (!mapArr.has(type)) {
                    mapArr.set(type, []);
                }
                mapArr.get(type).push(item);
                });

                const groupedByType = Array.from(mapArr.values());
                // console.log("第一步：先根据数据区名称来把数据项分为二维数组",groupedByType);
                //第二步：找出同一数据区下相同名称的数据项跟过滤掉同一数据区下的数据项
                var theSameArr = [] //相同
                var filterDataItem = [] //过滤
                groupedByType.forEach((item,index) => {
                    theSameArr = theSameArr.concat(this.findAllDuplicateObjects(item,'数据项'))
                    filterDataItem[index] = this.filterUniqueByName(item,'数据项')
                })
                // console.log("相同的数据项",theSameArr);
                // console.log("过滤掉的数据项",filterDataItem);
                var chakai = []
                filterDataItem.forEach(item => {
                     item.forEach(tt => {
                        chakai.push(tt)
                     })
                })
                this.filterDataItemArr = chakai
                // this.repeatDataItem = theSameArr
                this.repeatDataItem = theSameArr.filter(item => item['数据项名称'] != '备用')
                if(this.repeatDataItem.length != 0){
                    this.daorudiofalseEXCEL = true
                }


                
                // console.log("当前设备子系列", this.nowZixilieRow);
                // delSerialType(row.id)
                if(duplicates.length  == 0 && this.repeatDataItem.length == 0){
                    //开始跑接口
                    this.EXCELAPI()
                }
                
                

                this.$refs.EXCELinput.value = ""
                
            };
            reader.readAsArrayBuffer(file);
        },
        //导入EXCEL模版的接口操作
        async EXCELAPI(){
            this.repeatDataArea = []
            this.repeatDataItem = []
            this.daorudiofalseEXCEL = false
            // console.log("开始执行接口",this.filterDataAreaArr);
            // console.log("原有的数据区",this.leftDataArea);
            this.filterSubseries = this.nowZixilieRow
            this.startSequentialRequestsDELDATAAREA(this.leftDataArea)
            
        },
        //*先删除数据区
        async executeRequestsSequentiallyDELAREA(requests) {
            const results = [];
            for (const request of requests) {
                try {
                if(this.nowZixilieRow.serial_type == 2){ // 通用设备
                  await delTongArea(request.id)
                }else {// modbus设备
                   await delModbusArea(request.id)
                        
               }
                //   const response = await addModbusArea(dd); //新建数据区
                } catch (error) {
                }
            }
            return results;
        },
        // *先删除数据区
        async startSequentialRequestsDELDATAAREA(requestList) {
            this.isMask = true;
            const results = await this.executeRequestsSequentiallyDELAREA(requestList);
            // this.getDataList(this.filterSubseries)
            // console.log("删除完毕");
            this.startSequentialRequestsDATAAREA(this.filterDataAreaArr)
        },

        //*新建数据区
        async executeRequestsSequentiallyDATAAREA(requests) {
            const results = [];
            for (const request of requests) {
                try {
                    var dd = {
                            "data_area_name":request['名称'],
                            "data_area_addr":request['地址'] == "" ? 0 : this.hexToDecimal(request['地址']),
                            "read_code":request['读功能码'] == "" ? 0 : Number(request['读功能码']),
                            "write_code":request['写功能码'] == "" ? 0 : Number(request['写功能码']),
                            "data_area_len":request['长度'] == "" ? 0 : this.hexToDecimal(request['长度']),
                            "data_block_len":request['单位块长度'] == "" ? 2 : Number(request['单位块长度']),
                            "data_id_offset":request['地址偏移量'] == "" ? 0 : Number(request['地址偏移量']),
                            "device_serial_id":Number(this.filterSubseries.id),
                            'area_type':0,
                    }
                  const response = await addModbusArea(dd); //新建数据区
                //   console.log("新建数据区",response,request['名称']);
                  var queryDataArea =  await findAreaQuery(this.filterSubseries.id) //查询数据区，拿到数据区的ID
                //   console.log("查询数据区",queryDataArea);
                  var filterArr = queryDataArea.data.filter(item => item.data_area_name == request['名称'])
                  //找出这个数据区所需要新加的数据项
                  var shujuxiang = this.filterDataItemArr.filter(item => item['数据区名称'] == request['名称'])
                //   console.log("需要新建的数据项",this.filterDataItemArr,shujuxiang);
                  shujuxiang.forEach((item,index) => {
                    item['数据区ID'] = filterArr[0].id
                    item.sort = (index+1)
                  })
                  if(shujuxiang.length != 0){
                     //新建数据项
                     
                     await this.startSequentialRequestsDATAxiang(shujuxiang);
                  }
                //   this.filterDataItemArr
                  
                } catch (error) {
                }
            }
            return results;
        },
        // *新建数据区
        async startSequentialRequestsDATAAREA(requestList) {
            // this.isMask = true;
            const results = await this.executeRequestsSequentiallyDATAAREA(requestList);
            // console.log("循环查询数据项",results);
            this.getDataList(this.filterSubseries)
            this.$message({showClose: true,message: '导入成功',type: 'success'});
            // this.isMask = false;
            // 处理最终结果
        },
        //*新建数据项modbus数据
        async executeRequestsSequentiallyDATAxiang(requests) {
            const results = [];
            for (const request of requests) {
                try {
                    var dd = {
                        "area_id": request['数据区ID'],
                        "serial_id": this.filterSubseries.id,
                        "data_type": request['数据类型'] == "" ? 0 : Number(request['数据类型']),
                        "app_type_group": 0,
                        "app_type": request['应用类型'] == "" ? 0 : Number(request['应用类型']),
                        "max_value": request['最大合理值'] == "" ? 0 : Number(request['最大合理值']),
                        "min_value": request['最小合理值'] == "" ? 0 : Number(request['最小合理值']),
                        "decimal": request['小数位数'] == "" ? 0 : Number(request['小数位数']),
                        "coefficient": request['转换系数'] == "" ? 0 : Number(request['转换系数']),
                        "offset": request['偏移量'] == "" ? 0 : Number(request['偏移量']),
                        "zero": request['零死区'] == "" ? 0 : Number(request['零死区']),
                        "memory_cycle": 300,
                        "event_over_limit": 0,
                        "event_alert_type": 0,
                        "sort": request.sort,
                        "start_bit": request['起始位'] == "" ? 0 : Number(request['起始位']),
                        "end_bit": request['终止位'] == "" ? 0 : Number(request['终止位']),
                        "codify_type": request['采集类型'] == "" ? 0 : Number(request['采集类型']),
                        "area_addr": request['区内地址'] == "" ? 0 : Number(request['区内地址']),
                        "data_len": request['数据长度'] == "" ? 0 : Number(request['数据长度']),
                        "data_encoded": request['数据编码'] == "" ? 0 : Number(request['数据编码']),
                        "data_name": String(request['数据项名称']),
                        "collect_coef": request['采集系数'] == "" ? 0 : Number(request['采集系数']),
                        "data_number": request.sort,
                        "save": 0,
                        "reverse": 0,
                        "audio_alarm": 0,
                        "value_check": 0,
                        "alarm_print": 0,
                        "change_tip": 0,
                        "manual_value": 0,
                        "sampling": 0
                    }
                  const response = await addModbusItem(dd); //新建数据项
                 
                  
                } catch (error) {
                }
            }
            return results;
        },
        // *新建数据项modbus数据
        async startSequentialRequestsDATAxiang(requestList) {
            // this.isMask = true;
            const results = await this.executeRequestsSequentiallyDATAxiang(requestList);
            // console.log("循环查询数据项",results);
            
            // this.isMask = false;
            // 处理最终结果
        },
         //*新建数据项通用设备
        async executeRequestsSequentiallyDATAxiang2(requests) {
            const results = [];
            for (const request of requests) {
                try {
                    var dd = {
                        "area_id": request['数据区ID'],
                        "serial_id": this.filterSubseries.id,
                        "data_type":  request['数据类型'] == "" ? 0 : Number(request['数据类型']),
                        "app_type_group": 0,
                        "app_type": 0,
                        "max_value": 0,
                        "min_value": 0,
                        "decimal": 0,
                        "coefficient": 0,
                        "offset": 0,
                        "zero": 0,
                        "memory_cycle": 300,
                        "event_over_limit": 0,
                        "event_alert_type": 0,
                        "sort": request.sort,
                        "name":String( request['数据项名称']),
                        "save": 0,
                        "reverse": 0,
                        "audio_alarm": 0,
                        "value_check": 0,
                        "alarm_print": 0,
                        "change_tip": 0,
                        "manual_value": 0,
                        "sampling": 0
                    }
                  const response = await addTongItem(dd); //新建数据项
                 
                  
                } catch (error) {
                }
            }
            return results;
        },
        // *新建数据项通用设备
        async startSequentialRequestsDATAxiang2(requestList) {
            this.isMask = true;
            const results = await this.executeRequestsSequentiallyDATAxiang2(requestList);
            // console.log("循环查询数据项",results);
            
            this.isMask = false;
            this.$message({showClose: true,message: '导入成功',type: 'success'});
            this.getDataDian(this.nowLeftAreaRow)
            // 处理最终结果
        },

        //导出数据项
        exportToTxt() {
            // console.log("rightTable", this.nowLeftAreaRow);
            
            if(this.rightTableCopy.length == 0){
                return
            }
            var arr1 = []
            var fileName = ""
            if(this.nowZixilieRow.serial_type != 2){
                this.rightTableCopy.forEach(item => arr1.push(item.data_name))
                fileName = this.nowLeftAreaRow.data_area_name
            }else {
                this.rightTableCopy.forEach(item => arr1.push(item.name))
                fileName = this.nowLeftAreaRow.name
            }
            

            
            // 使用组件数据中的 items 数组
            const txtContent = arr1.join('\n');
            
            const blob = new Blob([txtContent], { type: 'text/plain;charset=utf-8' });
            const link = document.createElement('a');
            
            link.href = URL.createObjectURL(blob);
            link.download = fileName + new Date().toISOString().slice(0, 10) + '.txt';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            URL.revokeObjectURL(link.href);
        },
        fugaifn(type){
            if(type == '取消'){
                this.daorudiofalse = false
                return
            }
            if(this.chongfuNumIndex == this.intersection.length - 1 && this.intersection[this.chongfuNumIndex].templateName.length - 1 == this.templateNameIndex){
                this.daorudiofalse = false
                if(type == '跳过'){
                    var myindex = -1
                   myindex = this.daorumingchen.findIndex(item => item.GroupName == this.intersection[this.chongfuNumIndex].GroupName)
                  this.daorumingchen[myindex].templateName = this.daorumingchen[myindex].templateName.filter(tt => tt != this.intersection[this.chongfuNumIndex].templateName[this.templateNameIndex]);
                }
                var zuizhongArr = this.daorumingchen.filter(item => item.templateName.length != 0)

                var arr11 = []
                zuizhongArr.forEach(item => {
                    item.apiName = []
                    item.templateName.forEach(it => {
                         arr11  = this.daorudataListArr.filter(tt => tt.channelName == it)
                         if(arr11.length != 0){
                            item.apiName.push(arr11[0].templateId)
                         }
                    })
                })
                var params = {
                    'GroupName':[],
                    'SelectedTemplates':{},
                }
                var myarr1 = []
                zuizhongArr.forEach(item => {
                     params.GroupName.push(item.GroupName)
                     params.SelectedTemplates[item.GroupName] = []

                    //  params.SelectedTemplates[item.GroupName].push(tt)
                     item.templateName.forEach(tt => {
                         myarr1 = item.zongti.filter(it => it.name == tt)
                         if(myarr1.length != 0){
                            params.SelectedTemplates[item.GroupName].push(myarr1[0].value)
                         }
                     })
                })
                if(zuizhongArr.length == 0){
                    this.daorushebeimuban = false
                    this.xuanzedaorushebeimuban = false
                    return
                }
                params.IsOverwrite=true
                params.TemplateType = this.daorushebeimubanType
                // console.log("最终传参",params);
                this.isMask = true
                // return
                importTemplate(params).then(res => {
                    this.isMask = false
                    // console.log("覆盖导入",res);
                    if(res.code && res.code != 200){
                        this.$message.error('上传失败')
                    }else {
                        this.daorushebeimuban = false
                        this.xuanzedaorushebeimuban = false
                        this.getDeviceGroupApi()
                        this.$message({showClose: true,message: '导入成功',type: 'success'});
                    }
                })
                
            }
            if(type == '跳过'){
                var myindex = -1
                myindex = this.daorumingchen.findIndex(item => item.GroupName == this.intersection[this.chongfuNumIndex].GroupName)
                this.daorumingchen[myindex].templateName = this.daorumingchen[myindex].templateName.filter(tt => tt != this.intersection[this.chongfuNumIndex].templateName[this.templateNameIndex]);
            }
            if(this.intersection[this.chongfuNumIndex].templateName.length - 1 == this.templateNameIndex){
                
                this.chongfuNumIndex += 1
                this.templateNameIndex  = 0
            }else {

                this.templateNameIndex += 1
            }
            if(this.intersection[this.chongfuNumIndex]){
                this.nowdaorunuma = `${this.intersection[this.chongfuNumIndex].GroupName}下的${this.intersection[this.chongfuNumIndex].templateName[this.templateNameIndex]}`
            }
        },
        //生成点号
       GenerateNum(){
        //  this.nowZixilieRow.id
        GenerateNumfn(this.nowZixilieRow.id).then(res => {
             if(res.code == 200){
                 this.leaveFlag = false
                 this.$message({showClose: true,message: '操作成功',type: 'success'});
             }else {
                 this.$message.error('操作失败');
             }
        })
       },
       //导出模板
       exportfnTXT(){
        this.daorudaochuType = '导出'
        var arr1 = this.$refs.tree.getCheckedNodes()
        if(arr1.length == 0){
            this.$message({showClose: true,message: '请选择需要导出的设备模板',type: 'warning'});
            return
        }
        var arr2 = arr1.filter(item => item.type == '设备模板')
        // console.log("需要循环的数组",arr2);

        // 使用 reduce 方法进行分组
        const result = arr2.reduce((acc, item) => {
            // 查找是否已存在该 device_group_id 的分组
            const group = acc.find(g => g.ParentIds === String(item.device_group_id));
            
            if (group) {
                // 如果分组已存在，将当前 id 添加到 SubSeriesIds
                group.SubSeriesIds.push(String(item.id));
            } else {
                // 如果分组不存在，创建新分组
                acc.push({
                    ParentIds: String(item.device_group_id),
                    SubSeriesIds: [String(item.id)]
                });
            }
            
            return acc;
        }, []);

        // console.log(result);
        result.forEach(item => {
             item.ParentIds = [item.ParentIds]
        })
        this.isMask = true
         importExportTemplate(result).then(res => {
            this.isMask = false
                //  this.xuanzedaorushebeimuban = false
              if(res.code == 200){
                var  filess = res.data.files
                var wenjianname = []
                var neirong = []
                for (let key in filess) {
                    wenjianname.push(key)
                    neirong.push(filess[key])
                }
                // const arr1 = res.data.split("@@");
                // var wenjianname = []
                // var neirong = []
                // arr1.forEach(item => {
                //     if(item != ""){
                //         wenjianname.push(item.match(/\$\$(.*?)\$\$/)[1])
                //         neirong.push(item.match(/##(.*?)##/)[1])
                //     }
                // })
                this.mywenjianname = wenjianname
                this.mywenjianneirong = neirong
                this.exportTxtFiles()
              }
              
           })
       },
       date_format() { //value就是插值的数据
        
        let date = new Date();
        let Y = date.getFullYear();
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
        let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());

        let h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
        let m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
        let s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
        return `管理机模板${Y}${M}${D}${h}${m}${s}`
       },
       
       //选择导入模板模式1是管理机，2是上位机
       opendaopru(type){
          this.daorushebeimubanType = type
          this.$refs.dianfileInput.click();
       },
       handleCheckChange(){
        //   var arr1 = this.$refs.treedaoru.getCheckedNodes()
        //   var arr2 = {'GroupName':[]}
        //   console.log("arr1",arr1);
          var arr1 = this.$refs.treedaoru.getCheckedNodes()
        //   console.log("arr1",arr1);
        //   console.log("导入树",this.daorudataList);
            if(arr1.length == 0){
                this.$message({showClose: true,message: '请选择需要导入的设备模板',type: 'warning'});
                return
            }
            var arr2 = arr1.filter(item => item.type == '设备模板')
            // console.log("需要循环的数组",arr2);

            // 使用 reduce 方法进行分组
            const result = arr2.reduce((acc, item) => {
                // 查找是否已存在该 device_group_id 的分组
                const group = acc.find(g => g.GroupName == item.groupName);
                if (group) {
                    // 如果分组已存在，将当前 id 添加到 SelectedSerials
                    group.SelectedSerials.push((item.templateId));
                    group.templateName.push((item.channelName));
                    group.zongti.push({
                        name:item.channelName,
                        value:item.templateId
                    })
                } else {
                    // 如果分组不存在，创建新分组
                    acc.push({
                        GroupName: String(item.groupName),
                        SelectedSerials: [(item.templateId)],
                        templateName:[(item.channelName)],
                        zongti:[{
                            name:item.channelName,
                            value:item.templateId
                        }],
                    });
                }
                
                return acc;
            }, []);
            // console.log("导入传参",result)
         
          if(this.daorudaochuType =='导入'){
            // console.log("arr2",arr2);
            this.$refs.dianfileInput.value = ""
            var oldNames = []
            this.dataList.forEach(item => {
                 oldNames.push(item.channelName)
            })
            this.daorumingchen = JSON.parse(JSON.stringify(result))
            this.intersection = result.filter(item => oldNames.includes(item.GroupName))
            // var chongfuName = result.filter(item => oldNames.includes(item.GroupName))
            var quchuArr = []
            var zhaochuArr = []
            this.intersection.forEach(item => {
                 quchuArr = this.dataList.filter(tt => item.GroupName == tt.channelName)
                 item.zongti.forEach((it) => {
                    zhaochuArr = quchuArr[0].children.filter(tt => tt.device_template_name == it.name)
                    if(zhaochuArr.length == 0){
                         item.zongti = item.zongti.filter(tt => tt.name != it.name)
                    }
                 })
                //  item.zongti = quchuArr[0].children.filter(tt => tt.device_template_name == it)
            })
           
            this.intersection.forEach(item => {
                 item.SelectedSerials = []
                 item.templateName = []
                 item.zongti.forEach(it => {
                     item.SelectedSerials.push(it.value)
                     item.templateName.push(it.name)
                 })
            })
            this.intersection = this.intersection.filter(item => item.templateName.length != 0)
            //  console.log("this.intersection",this.intersection);
            if(this.intersection.length != 0 ){
                this.nowdaorunuma = `${this.intersection[0].GroupName}下的${this.intersection[0].templateName[0]}`
                this.chongfuNumIndex = 0
                this.templateNameIndex = 0
                this.daorudiofalse = true
            }else {
                
                var params = {
                    'GroupName':[],
                    'SelectedTemplates':{},
                }
                result.forEach(item => {
                     params.GroupName.push(item.GroupName)
                     params.SelectedTemplates[item.GroupName] = []
                     item.SelectedSerials.forEach(tt => {
                         params.SelectedTemplates[item.GroupName].push(tt)
                     })
                })
                params.IsOverwrite=true
                params.TemplateType = this.daorushebeimubanType
                // console.log("最终传参",params);
                this.isMask = true
                 importTemplate(params).then(res => {
                    // console.log("导入",res);
                    this.isMask = false
                    if(res.code && res.code != 200){
                        this.$message.error('上传失败')
                    }else {
                        this.daorushebeimuban = false
                        this.xuanzedaorushebeimuban = false
                        this.getDeviceGroupApi()
                        this.$message({showClose: true,message: '导入成功',type: 'success'});
                        
                    }
                })
            }
            
           }
       },
        async exportTxtFiles() {
            var filesname = this.date_format()
            const zip = new JSZip();
            const folder = zip.folder(filesname); // 创建文件夹
            this.mywenjianneirong.forEach((item,index) => {
                 folder.file(`${this.mywenjianname[index]}`, item)
            })
            // folder.file("file5.txt", "这是文件5的内容");

            // 生成ZIP文件并下载
            const content = await zip.generateAsync({ type: 'blob' });
            saveAs(content, `${filesname}.zip`); // 下载名为text_files.zip
        },
        //导入模板
        openDaorufn(){
            this.daorudaochuType = '导入'
            this.daorushebeimuban = true
        },
        handleFileChange(event) { 
        const files = event.target.files;
        // console.log("files",files);
        // return
          if(files.length == 0){
            return
          }
           let formData = new FormData()
            for (let i = 0; i < files.length; i++) {
                // console.log("files[i]",files[i]);
                formData.append('files[]', files[i]);
            }
            // console.log("上传",formData);
            // return
            var apiObj = {
                 type:this.daorushebeimubanType,
                 files:formData
            }
           
            this.isMask = true
            importTemplateFile(apiObj).then(res => {
                this.isMask = false
                this.$refs.dianfileInput.value = '';
                if(res.code == 200){
                    var RESDATA = res.data
                    var arr2 = []
                    var arr3 = []
                    RESDATA.forEach((item,index) => {
                        arr2.push({
                            channelName:item.groupName,
                            id:index,
                            type:"模板组",
                            children:[]
                        })
                        item.templates.forEach((tt,i) => {
                            arr2[index].children.push({
                                channelName:tt.templateName,
                                id:index+10000+(i+1),
                                type:"设备模板",
                                groupName:item.groupName,
                                children:[],
                                templateId:tt.templateId,
                                serialId:tt.templateName,
                                device_group_id:index+2
                            })
                            arr3.push({
                                channelName:tt.templateName,
                                type:"设备模板",
                                groupName:item.groupName,
                                children:[],
                                templateId:tt.templateId,
                                serialId:tt.templateName,
                                device_group_id:index+2
                            })
                        })
                    })
                    // device_group_id
                    this.daorudataList = arr2
                    this.daorudataListArr = arr3
                    // this.daorudataList=[
                    //     {
                    //         'channelName':"设备模板",
                    //         'id':'100002',
                    //         'type':"设备模板",
                    //         'children':arr2,
                    //     }
                    // ]
                    this.xuanzedaorushebeimuban = true
                   
                }else {
                     this.$message({showClose: true,message: '导入失败'+res.msg,type: 'warning'});
                }
                // if(res != undefined && res != ""){
                    
                // }
            })
           
        },
        handleSizeChangejiao(){},
        handleCurrentChangejiao(val){
            this.currentPage=val;
            this.rightTable = this.getCurrentPageData(this.rightTableCopy,this.currentPage,100)
        },
        getCurrentPageData(dataList, page, size) {
            // 计算并返回当前页数据
            var res = dataList.slice((page-1)*size, page*size)
            return res
        },
         //获取数据类型
        getcommondatatype(){
            commondatatype().then(res => {
                // console.log("数据类型",res);
                  this.dataTypeList = res.data
            })
        },
        //获取应用类型组
        getcommonAppTypeGroup(){
            commonAppTypeGroup().then(res => {
                //   this.typeGroup = res
                if(res.code == 200){
                    this.typeGroupAll = res.data
                    this.typeGroup = res.data.filter(item => item.pid === 0)

                }
            })
        },
        //根据应用类型组获取应用类型
        getApplicationTypefn(val){
            this.modbusItemObj.app_type = ""
            var arr1 = this.typeGroup.filter(item => item.code === val)
            this.yingdataTypeList = this.typeGroupAll.filter(item => item.pid === arr1[0].id)
        },
          //获取数据编码
        getcommonDataCode(){
           
            commonDataCode().then(res => {
                 if(res.code == 200){
                    var resData = res.data
                    resData.forEach((item,index) => {
                        item.keymy = index+1
                    })
                    this.codifyTypeList = resData
                  }
            })
        },
        //获取设备组
        getDeviceGroupApi(){
            this.isMask = true
            this.dataList = []
            findDeviceGroupListAll().then(res => {
                this.isMask = false
                if(res.code == 200){
                     var RESDATA = res.data
                     var mynum = 1
                     RESDATA.forEach(item => {
                         //第一层为模板组
                         item.type = '模板组'
                         item.channelName = item.device_group_name
                         item.apiflag = true
                         mynum += 1
                         item.myid = mynum
                         //第二层为设备模板
                         item.children.forEach(towitem => {
                            towitem.type = '设备模板'
                            towitem.channelName = towitem.device_template_name
                            //第三层为设备子系列
                            towitem.children = []
                            mynum += 1
                            towitem.myid = mynum
                         })
                     })
                     this.dataList = RESDATA
                }
            }).catch(() => {
                this.isMask = false
            })
           
        },
        //获取设备模板
        getDeviceMuban(){
            this.isMask = true
             findDeviceTemplate(this.leftRow.id).then(res => {
                //    console.log("获取设备模板",res);
                   this.leftRow.children = []
                   if(res){
                    var arr = []
                    res.forEach(item => {
                          arr.push({
                             'channelName':item.device_template_name,
                             'id':item.id,
                             'device_group_id':item.device_group_id,
                             'apiflag':false,
                             'type':"设备模板",
                             'children':[]
                          })
                    })
                    this.leftRow.children = arr
                    this.leftRow.apiflag = false
                }
                   this.isMask = false
             }).catch(() => {
                     this.isMask = false
              })
        },
        //添加模板组/设备模板
        addLeftFN(type){
             this.deviceGroupName = ""
             this.addGroudName = type
             this.leftType = 'add'
             
             if(type == '添加设备模板' && this.leftRow.id == undefined){
                 this.$message({showClose: true,message: '请选择模板组！！',type: 'warning'});
                 return
             }
             if(this.leftRow.type == '设备模板'){
                this.$message({showClose: true,message: '请选择模板组！！',type: 'warning'});
                 return
             }
             this.zhuandialogflag = true
        },
        //确定添加模板组/设备模板
        deviceTempFN(){
            if(this.addGroudName == '添加设备模板'){
                 var d = {
                        "device_template_name":this.deviceGroupName,
                        "device_group_id":this.leftRow.id
                    }
                 this.diaisMask = true
                  addDeviceTemplate(d).then(res => {
                    // console.log("res",res);
                     this.diaisMask = false
                     if(res.code == 200){
                         this.$message({showClose: true,message: '新增成功',type: 'success'});
                        this.zhuandialogflag = false
                         this.getDeviceGroupApi()
                     }else {
                          this.$message({showClose: true,message: '新增失败',type: 'error'});
                     }
                  }).catch(() => {
                     this.diaisMask = false
                  })
            }else if(this.addGroudName == '添加模板组'){
                  var  d = {
                     'device_group_name':this.deviceGroupName
                  }
                  this.diaisMask = true
                  addDeviceGroup(d).then(res => {
                    // console.log("res",res);
                     this.diaisMask = false
                     if(res.code == 200){
                         this.$message({showClose: true,message: '新增成功',type: 'success'});
                        this.zhuandialogflag = false
                         this.getDeviceGroupApi()
                     }else {
                          this.$message({showClose: true,message: '新增失败',type: 'error'});
                     }
                  }).catch(() => {
                     this.diaisMask = false
                  })
            }else if(this.addGroudName == '修改模板组'){
                var  d = {
                    "id": this.leftRow.id,
                    "device_group_name": this.deviceGroupName
                }
                this.diaisMask = true
                editDeviceGroup(d).then(res => {
                    this.diaisMask = false
                    //   console.log("修改模版组",res);
                      if(res.code == 200){
                         this.$message({showClose: true,message: '修改成功',type: 'success'});
                         this.zhuandialogflag = false
                         this.getDeviceGroupApi()
                     }else {
                          this.$message({showClose: true,message: '修改失败',type: 'error'});
                     }
                })

            }else if(this.addGroudName == '修改设备模板'){
                var  d = {
                     "id":this.leftRow.id,
                     'device_template_name':this.deviceGroupName
                }
                this.diaisMask = true
                editDeviceTemplate(d).then(res => {
                    //   console.log("成功更新设备模板",res);
                     this.diaisMask = false
                      if(res.code == 200){
                         this.$message({showClose: true,message: '修改成功',type: 'success'});
                         this.zhuandialogflag = false
                         this.getDeviceGroupApi()
                     }else {
                       
                          this.$message({showClose: true,message: '修改失败',type: 'error'});
                     }
                })
                
            }
        },
        //查询设备模板的子系列
        getDeviceTempSerialList(){
            // var d = {
            //       "device_template_id":this.leftRow.id
            // }
            this.isMask = true
            findDeviceSerial(this.leftRow.id).then(res => {
                  this.isMask = false
                 if(res.code == 200){
                     this.leftTable = res.data
                 }
            }).catch(() => {
                     this.isMask = false
              })
        },
        //点击左边树形结构
        handleNodeClick(data){
            //  console.log(data);
             this.leftRow = data
            //  if(data.apiflag){
            //      this.getDeviceMuban()
            //  }
             if(data.type == '设备模板'){ 
                this.getDeviceTempSerialList()
             }
        },
        //修改左边树形结构的数据
        leftEditFN(row){
            this.diaisMask = false
            this.leftRow = row.data
            // console.log("data",row.data);
            this.leftType = 'edit'
            this.deviceGroupName = row.data.channelName
            if(row.data.type == '模板组'){
               this.addGroudName = `修改模板组`
            }else {
                this.addGroudName = `修改设备模板`
            }
            this.zhuandialogflag = true
        },
        //删除模板
        leftDelFN(row){
            //  console.log("row",row);
            this.$confirm(`是否要删除此项？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                if(row.type == '模板组'){
                    DELETEDeviceGroup(row.id).then(res => {
                        //  console.log("删除",res);
                          if(res.code == 200){
                            
                             this.$message({showClose: true,message: '删除成功',type: 'success'});
                            this.getDeviceGroupApi()
                          }else {
                              this.$message.error('删除失败！！')
                          }
                    })
                }else {
                    DELETEDeviceTemplate(row.id).then(res => {
                        //  console.log("删除",res);
                          if(res.code == 200){
                            
                              this.$message({showClose: true,message: '删除成功',type: 'success'});
                            this.getDeviceGroupApi()
                          }else {
                             this.$message.error('删除失败！！')
                          }
                    })
                }
            //    delAgreementapi(row.id).then(res => {
            //       console.log("删除",res);
            //       if(res == undefined){
            //          this.$message.error('删除失败！！')
            //       }else {
            //          this.$message({showClose: true,message: '删除成功',type: 'success'});
            //         this.getAgreementList()
            //       }
            //    }).catch(error => {
            //         this.$message.error('删除失败！！')
            //    })
              
        
                      
            }).catch(() => {
              // ...
            });
        },
        //添加修改子系列
        deviceDioFN(type){
             if(this.leftRow.type != '设备模板'){
                this.$message({showClose: true,message: '请选择设备模板',type: 'warning'});
                return
            }
            this.serialType = type
            this.typenameSerial = ""
            this.radio = "1"
            this.deviceDio = true
        },
        //修改设备子系列
        editDioFN(type,row){
            this.serialType = type
            this.typenameSerial = row.serial_name
            this.radio = String(row.serial_type)
            this.nowZixilieRow = row
            this.deviceDio = true
        },
        //确定添加修改子系列
        quedingSerialFN(){
            if(this.typenameSerial == ""){
                   this.$message({showClose: true,message: '设备子系列名称不能为空！',type: 'warning'});
                    return
            }
            if(this.serialType == '添加设备子系列'){
                if(this.leftRow.id == undefined){
                     this.$message({showClose: true,message: '请选择设备模板！！',type: 'warning'});
                    return
                }
                
                 var d = {
                    "serial_name":this.typenameSerial,
                    "serial_type":Number(this.radio),
                    "device_template_id":this.leftRow.id
                }
                 addSerialType(d).then(res => {
                      if(res.code == 200){
                         this.$message({showClose: true,message: '新增成功',type: 'success'});
                        this.deviceDio = false
                        this.getDeviceTempSerialList()
                     }else {
                          this.$message({showClose: true,message: '新增失败',type: 'error'});
                     }
                 })
            }else {
                 var d = {
                    "serial_name":this.typenameSerial,
                    "serial_type":Number(this.radio),
                    "id":this.nowZixilieRow.id,
                    // "device_template_id":this.leftRow.id
                }
                 editSerialType(d).then(res => {
                    // console.log("res",res);
                      if(res.code == 200){
                         this.$message({showClose: true,message: '修改成功',type: 'success'});
                        this.deviceDio = false
                        this.getDeviceTempSerialList()
                     }else {
                          this.$message({showClose: true,message: '修改失败',type: 'error'});
                     }

                 })
            }
        },
        //删除设备子系列
        delDioFN(row){
            this.$confirm(`是否要删除此项？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
               delSerialType(row.id).then(res => {
                  if(res.code == 200){
                     this.$message({showClose: true,message: '删除成功',type: 'success'});
                    this.getDeviceTempSerialList()
                  }else {
                      this.$message.error('删除失败！！')
                  }
               }).catch(error => {
                    this.$message.error('删除失败！！')
               })
              
        
                      
            }).catch(() => {
              // ...
            });
        },
        //查询数据区
        getDataList(row){
            var d = {
            "id":row.id,
            "serial_type":row.serial_type
            }
            this.nowZixilieRow = row
            this.rightTable = []
            this.isMask = true
            if(row.serial_type == 2){ //通用设备
                    findAreaQueryTong(row.id).then(res => {
                        this.isMask = false
                        console.log("通用设备数据区",res);
                        //  console.log("this.codifyTypeList",this.codifyTypeList);
                       if(res.code == 200){
                          this.dataConfigure = false
                          res.data.forEach((item,index) => {
                            item.showconFlag = false
                            item.myindex = index
                            item.checked = true
                          })
                          this.leftDataArea = res.data
                       }
                    })
            }else { //Modbus设备
                  findAreaQuery(row.id).then(res => {
                        // console.log("Modbus设备数据区",res);
                        this.isMask = false
                        //  console.log("this.codifyTypeList",this.codifyTypeList);
                        if(res.code == 200){
                            this.dataConfigure = false
                            res.data.forEach((item,index) => {
                                item.showconFlag = false
                                item.myindex = index
                                item.data_area_addr =  this.decimalToHex(Number(item.data_area_addr))
                                item.data_area_len =  this.decimalToHex(Number(item.data_area_len))
                                item.exportdata_area_addr =  JSON.parse(JSON.stringify(item.data_area_addr))
                                item.checked = true
                            })
                            this.leftDataArea = res.data
                        }
                    })
            }
            
        },
        // 十进制转十六进制
        decimalToHex(decimal) {
        return decimal.toString(16);
        },
        // 十六进制转十进制
        hexToDecimal(hex) {
            return parseInt(hex, 16);
        },
        //十六进制
        hexadecimalfn(type,val,row){
            //  console.log(val,this.tempArea.data_area_addr);
            if(type == '新增'){
                 if(this.tempArea.data_area_addr === ""){
                      return
                 }
                 if(val){//十六进制
                  
                   if(this.decimalToHex(Number(this.tempArea.data_area_addr)) == 'NaN'){
                     this.$message({showClose: true,message: '非法输入！！！',type: 'error'});
                     this.tempArea.checked = false
                     return
                   }
                   this.tempArea.data_area_addr =  this.decimalToHex(Number(this.tempArea.data_area_addr))
                   if(this.tempArea.data_area_len === ""){
                      return
                   }
                   this.tempArea.data_area_len =  this.decimalToHex(Number(this.tempArea.data_area_len))
                 }else {//十进制
                   this.tempArea.data_area_addr =  this.hexToDecimal((this.tempArea.data_area_addr))
                   if(this.tempArea.data_area_len === ""){
                      return
                   }
                   this.tempArea.data_area_len =  this.hexToDecimal((this.tempArea.data_area_len))
                 }
            }else {
                if(row.data_area_addr === ""){
                      return
                 }
                 if(val){//十六进制
                //    console.log("this.decimalToHex(Number(this.tempArea.data_area_addr)",this.decimalToHex(Number(row.data_area_addr)));
                   if(this.decimalToHex(Number(row.data_area_addr))== 'NaN'){
                    this.$message({showClose: true,message: '非法输入！！！',type: 'error'});
                     row.checked = false
                     return
                   }
                   row.data_area_addr =  this.decimalToHex(Number(row.data_area_addr))
                   if(row.data_area_len === ""){
                      return
                   }
                   row.data_area_len =  this.decimalToHex(Number(row.data_area_len))
                 }else {//十进制
                   row.data_area_addr =  this.hexToDecimal((row.data_area_addr))
                   if(row.data_area_len === ""){
                      return
                    }
                   row.data_area_len =  this.hexToDecimal((row.data_area_len))
                 }
            }
        },
        //计算数据长度
        calculateDataLength(item){
            if(item.data_area_name != this.nowLeftAreaRow.data_area_name){
                 this.$message({showClose: true,message: '请先选中该数据区再点击该计算长度',type: 'warning'});
                return
            }
            // data_area_name
            // data_area_len
            // console.log("数据项",this.rightTableCopy);
            const maxValue = Math.max(...this.rightTableCopy.map(item => item.area_addr));
            const maxdata_len = Math.max(...this.rightTableCopy.map(item => item.data_len));
            
            // console.log("最大的区内地址",maxValue);
            if(item.checked){
              item.data_area_len = this.decimalToHex(Number(maxValue + maxdata_len))
            }else {
              item.data_area_len = (maxValue + maxdata_len)
            }
            // rightTable
        },
        //添加修改左侧数据区
        addLeftDataArea(){
            // data_area_addr
            this.tempArea = {
                 checked:true,
                 name:"新数据区",
                 data_area_name:"新数据区",
                 data_area_addr:"",
                 read_code:"3",
                 write_code:"0",
                 data_area_len:"0",
                 data_block_len:"2",
                 data_id_offset:"0",
                 area_type:0,
                 myindex:this.leftDataArea.length,
            }
            this.dataAreaFlag = true
        },
        //确定添加或者修改数据区
        saveLeftDataArea(data){
            //   console.log("保存数据区",data);
            if(data.area_type === ""){
                this.$message({showClose: true,message: '请选择数据区类型',type: 'warning'});
                return
            }
            if(data.data_id_offset === ""){
                this.$message({showClose: true,message: '数据偏移量不能为空',type: 'warning'});
                return
            }
            // console.log("查看当前设备",this.nowZixilieRow);
            if(this.nowZixilieRow.serial_type == 2){ // 通用设备
               if(data.name === ""){
                    this.$message({showClose: true,message: '数据区名称不能为空',type: 'warning'});
                    return
                }
                this.diaisMask = true
               if(data.id){//修改
                 var d = {
                        "name":data.name,
                        "data_id_offset":Number(data.data_id_offset),
                        "device_serial_id":Number(this.nowZixilieRow.id),
                        'area_type':data.area_type,
                        "id":Number(data.id),
                    }
                  var arr1 = this.leftDataArea.filter(item => item.id != data.id)
                  var arr2 = arr1.filter(item => item.name == data.name)
                  if(arr2.length != 0){
                    this.diaisMask = false
                    this.$message({showClose: true,message: '数据区名称已重复，请更换！',type: 'warning'});
                    return
                  }
                  editTongArea(d).then(res => {
                    //   console.log("修改数据区",res);
                    this.diaisMask = false
                      if(res.code == 200){
                          this.getDataList(this.nowZixilieRow)
                          this.leaveFlag = true
                          this.$message({showClose: true,message: '保存成功',type: 'success'});
                      }else {
                           this.$message({showClose: true,message: '保存失败',type: 'error'});
                      }
                  })
                }else {//新增
                    var d = {
                            "name":data.name,
                            "data_id_offset":Number(data.data_id_offset),
                            "device_serial_id":Number(this.nowZixilieRow.id),
                            'area_type':data.area_type,
                    }
                    var arr1 = this.leftDataArea.filter(item => item.name == data.name)
                    if(arr1.length != 0){
                        this.diaisMask = false
                        this.$message({showClose: true,message: '数据区名称已重复，请更换！',type: 'warning'});
                        return
                    }
                    addTongArea(d).then(res => {
                        this.diaisMask = false
                        // console.log("新增数据区",res);
                        if(res.code == 200){
                            this.dataAreaFlag = false
                            this.getDataList(this.nowZixilieRow)
                            this.leaveFlag = true
                            this.$message({showClose: true,message: '保存成功',type: 'success'});
                        }else {
                            this.$message({showClose: true,message: '保存失败',type: 'error'});
                        }
                    })
                }
            }else { // modbus设备
                if(data.data_area_addr === ""){
                    this.$message({showClose: true,message: '数据区地址不能为空',type: 'warning'});
                    return
                }
                if(data.read_code === ""){
                    this.$message({showClose: true,message: '数据区读功能码不能为空',type: 'warning'});
                    return
                }
                if(data.write_code === ""){
                    this.$message({showClose: true,message: '数据区写功能码不能为空',type: 'warning'});
                    return
                }
                if(data.data_area_len === ""){
                    this.$message({showClose: true,message: '数据区长度不能为空',type: 'warning'});
                    return
                }
                if(data.data_block_len === ""){
                    this.$message({showClose: true,message: '数据单位块长度不能为空',type: 'warning'});
                    return
                }
                // this.diaisMask = true
                 if(data.id){//修改
                  var d = {
                       "data_area_name":data.data_area_name,
                        "data_area_addr":Number(data.data_area_addr),
                        "read_code":Number(data.read_code),
                        "write_code":Number(data.write_code),
                        "data_area_len":Number(data.data_area_len),
                        "data_block_len":Number(data.data_block_len),
                        "data_id_offset":Number(data.data_id_offset),
                        "device_serial_id":Number(this.nowZixilieRow.id),
                        'area_type':data.area_type,
                        "id":Number(data.id),
                  }
                  if(data.checked){
                     d.data_area_addr =  this.hexToDecimal((data.data_area_addr))
                     d.data_area_len =  this.hexToDecimal((data.data_area_len))
                  }else {
                     if(this.decimalToHex(Number(data.data_area_addr)) == 'NaN'){
                        this.$message({showClose: true,message: '数据区地址非法输入！！！',type: 'error'});
                        data.checked = false
                        return
                     }
                  }
                  var arr1 = this.leftDataArea.filter(item => item.id != data.id)
                  var arr2 = arr1.filter(item => item.data_area_name == data.data_area_name)
                  if(arr2.length != 0){
                    this.$message({showClose: true,message: '数据区名称已重复，请更换！',type: 'warning'});
                    return
                  }
                  editModbusArea(d).then(res => {
                    //   console.log("修改数据区",res);
                    this.diaisMask = false
                      if(res.code == 200){
                          this.getDataList(this.nowZixilieRow)
                          this.leaveFlag = true
                          this.$message({showClose: true,message: '保存成功',type: 'success'});
                      }else {
                           this.$message({showClose: true,message: '保存失败',type: 'error'});
                      }
                  })
              }else {//新增
                   var d = {
                       "data_area_name":data.data_area_name,
                        "data_area_addr":Number(data.data_area_addr),
                        "read_code":Number(data.read_code),
                        "write_code":Number(data.write_code),
                        "data_area_len":Number(data.data_area_len),
                        "data_block_len":Number(data.data_block_len),
                        "data_id_offset":Number(data.data_id_offset),
                        "device_serial_id":Number(this.nowZixilieRow.id),
                        'area_type':data.area_type,
                  }
                //   console.log("this.leftDataArea",this.leftDataArea);
                  var arr1 = this.leftDataArea.filter(item => item.data_area_name == data.data_area_name)
                  if(arr1.length != 0){
                    this.$message({showClose: true,message: '数据区名称已重复，请更换！',type: 'warning'});
                    return
                  }
                  if(this.tempArea.checked){
                     d.data_area_addr =  this.hexToDecimal((this.tempArea.data_area_addr))
                     d.data_area_len =  this.hexToDecimal((this.tempArea.data_area_len))
                  }else {
                     if(this.decimalToHex(Number(this.tempArea.data_area_addr)) == 'NaN'){
                        this.$message({showClose: true,message: '数据区地址非法输入！！！',type: 'error'});
                        this.tempArea.checked = false
                        return
                    }
                  }
                  addModbusArea(d).then(res => {
                    this.diaisMask = false
                    //   console.log("新增数据区",res);
                      if(res.code == 200){
                          this.getDataList(this.nowZixilieRow)
                          this.dataAreaFlag = false
                          this.leaveFlag = true
                          this.$message({showClose: true,message: '保存成功',type: 'success'});
                      }else {
                           this.$message({showClose: true,message: '保存失败',type: 'error'});
                      }
                  })
              }
            }
              
        },
        // 删除左侧数据区
        delModbusAreaFn(row){
            
              this.$confirm(`是否要删除此项？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              
               if(this.nowZixilieRow.serial_type == 2){ // 通用设备
                   delTongArea(row.id).then(res => {
                        if(res.code == 200){
                            this.leaveFlag = true
                            this.$message({showClose: true,message: '删除成功',type: 'success'});
                            this.getDataList(this.nowZixilieRow)
                        }else {
                            this.$message.error('删除失败！！')
                        }
                    }).catch(error => {
                            this.$message.error('删除失败！！')
                    })
                }else {// modbus设备
                    delModbusArea(row.id).then(res => {
                        if(res.code == 200){
                            this.leaveFlag = true
                            this.$message({showClose: true,message: '删除成功',type: 'success'});
                            this.getDataList(this.nowZixilieRow)
                        }else {
                            this.$message.error('删除失败！！')
                        }
                    }).catch(error => {
                            this.$message.error('删除失败！！')
                    })
               }
              
        
                      
            }).catch(() => {
              // ...
            });
        },
        //查询右侧数据点
        getDataDian(row){
            this.nowLeftAreaRow = row
            this.isMask = true
            this.nowInsertData = []
             if(this.nowZixilieRow.serial_type == 2){ // 通用设备 
                 findTongItem(row.id).then(res => {
                        // console.log("查询数据点",res);
                        this.isMask = false
                        if(res.code == 200){
                        var arr1 = []
                        var arr2 = []
                        var arr3 = []
                        res.data.sort((a, b) => a.sort - b.sort);
                        this.rightTableCopy = JSON.parse(JSON.stringify(res.data))
                        this.total = this.rightTableCopy.length
                         this.rightTableCopy.forEach(item => {
                                    arr1 = this.dataTypeList.filter(tt => tt.value == item.data_type)
                                    if(arr1.length != 0){
                                        item.mydatatype = arr1[0].name
                                    } 
                                    arr2 = this.codifyTypeList.filter(tt => tt.value == item.data_encoded)
                                    if(arr2.length != 0){
                                        item.mydata_encoded = arr2[0].name
                                    } 
                                    arr3 = this.dataTypeList.filter(tt => tt.value == item.codify_type)
                                    if(arr3.length != 0){
                                        item.mycodify_type = arr3[0].name
                                    } 
                        })
                        this.currentPage = 1
                        this.rightTable = this.getCurrentPageData(this.rightTableCopy,this.currentPage,100)

                      
                        

                        }

                    }).catch(() => {
                            this.isMask = false
                    })
             }else {// modbus设备
                 findModbusItem(row.id).then(res => {
                        // console.log("查询数据点",res);
                        this.isMask = false.stop
                        if(res.code == 200){
                        this.rightTable = res
                        var arr1 = []
                        var arr2 = []
                        var arr3 = []
                        res.data.sort((a, b) => a.sort - b.sort);
                        this.rightTableCopy = JSON.parse(JSON.stringify(res.data))
                        this.total = this.rightTableCopy.length
                            this.rightTableCopy.forEach(item => {
                                    item.name = item.data_name
                                    arr1 = this.dataTypeList.filter(tt => tt.value == item.data_type)
                                    if(arr1.length != 0){
                                        item.mydatatype = arr1[0].name
                                    } 
                                    arr2 = this.codifyTypeList.filter(tt => tt.value == item.data_encoded)
                                    if(arr2.length != 0){
                                        item.mydata_encoded = arr2[0].name
                                    } 
                                    arr3 = this.dataTypeList.filter(tt => tt.value == item.codify_type)
                                    if(arr3.length != 0){
                                        item.mycodify_type = arr3[0].name
                                    } 
                                })

                        }
                        this.currentPage = 1
                        this.rightTable = this.getCurrentPageData(this.rightTableCopy,this.currentPage,100)

                    }).catch(() => {
                            this.isMask = false
                    })
             }
             
        },
        //批量增加数据项
        batchAddDataDian(){
            if(Object.keys(this.nowLeftAreaRow).length === 0){
                 this.$message({showClose: true,message: '请选择数据区',type: 'warning'});
                return
            }
            this.batchDataItem = {
                number:"10",
                data_len:"2",
                codify_type:4,
                data_type:6,
                data_encoded:1,
                arrangeByPosition:false,
            }
            this.batchshujuxiang = true
        },
        //确定批量增加数据项
        batchAddDataxiangFn(){
            if(this.batchDataItem.number === "" || Number(this.batchDataItem.number) <= 0){
                    this.$message({showClose: true,message: '数据项数目格式不正确',type: 'warning'});
                    return
            }
            if(this.batchDataItem.data_len === ""){
                    this.$message({showClose: true,message: '数据项长度不能为空',type: 'warning'});
                    return
            }
            if(this.batchDataItem.codify_type === ""){
                    this.$message({showClose: true,message: '采集类型不能为空',type: 'warning'});
                    return
            }
            if(this.batchDataItem.data_type === ""){
                    this.$message({showClose: true,message: '数据类型不能为空',type: 'warning'});
                    return
            }
            if(this.batchDataItem.data_encoded === ""){
                    this.$message({showClose: true,message: '编码类型不能为空',type: 'warning'});
                    return
            }
            var params = {
                id:this.nowLeftAreaRow.id,
                arr:[]
            }
            for (let index = 0; index < Number(this.batchDataItem.number); index++) {
                params.arr.push({
                    'sort':this.rightTable.length + (index + 1),
                    'data_len':Number(this.batchDataItem.data_len),
                    'codify_type':Number(this.batchDataItem.codify_type),
                    'data_type':Number(this.batchDataItem.data_type),
                    'data_encoded':Number(this.batchDataItem.data_encoded),
                    'bit_aligned':this.batchDataItem.arrangeByPosition ? 1 : 0
                })
            }
            this.diaisMask = true
            if(this.nowZixilieRow.serial_type == 2){ // 通用设备
              batchAddTongItem(params).then(res => {
                    this.diaisMask = false
                    if(res.code == 200){
                        this.batchshujuxiang = false
                        this.getDataDian(this.nowLeftAreaRow)
                        this.leaveFlag = true
                        this.$message({showClose: true,message: '批量添加成功',type: 'success'});
                    }else {
                        this.$message({showClose: true,message: '批量添加失败',type: 'error'});
                    }
                }).catch(() => {
                    this.$message({showClose: true,message: '批量添加失败',type: 'error'});
                })
            }else {
                batchAddModbusItem(params).then(res => {
                    this.diaisMask = false
                    if(res.code == 200){
                        this.batchshujuxiang = false
                        this.getDataDian(this.nowLeftAreaRow)
                        this.leaveFlag = true
                        this.$message({showClose: true,message: '批量添加成功',type: 'success'});
                    }else {
                        this.$message({showClose: true,message: '批量添加失败',type: 'error'});
                    }
                }).catch(() => {
                    this.$message({showClose: true,message: '批量添加失败',type: 'error'});
                })
            }
        },
        //新增数据点
        addDataDian(type,num){
            // console.log("排序",num);
            if(Object.keys(this.nowLeftAreaRow).length === 0){
                 this.$message({showClose: true,message: '请选择数据区',type: 'warning'});
                return
            }
            this.nowAddOrEditdian = '新增数据项'
            var arr1 = this.dataTypeList.filter(item => item.name == 'Single')
            var datatype = ""
            if(this.dataTypeList.length != 0 && arr1.length != 0){
                 datatype = arr1[0].value
            }
            var arr2 = this.dataTypeList.filter(item => item.name == 'UInt16')
            var datatype2 = ""
            if(this.dataTypeList.length != 0 && arr2.length != 0){
                 datatype2 = arr2[0].value
            }
            var arr2 = this.typeGroup.filter(item => item.name == '未定义')
            var app_type_group = ""
            var app_typeArr = []
            if(this.typeGroup.length != 0 && arr2.length != 0){
                 app_type_group = arr2[0].code
                 this.getApplicationTypefn(app_type_group)
                 app_typeArr = this.typeGroupAll.filter(item => item.pid != 0 && item.pid === arr2[0].id)
                 
            }
            var sort = 1
            if(type == '新增'){
                this.nowDatadianedit = false
                 sort  = this.rightTable.length + 1
            }else {
                this.nowDatadianedit = true
                 sort = num
                 this.nowAddOrEditdian = '插入数据项'
            }
            var mydata_encoded = ""
            if(this.codifyTypeList.length == 0){
                mydata_encoded = ""
            }else {
                 if(this.codifyTypeList.length == 1){
                    mydata_encoded =  this.codifyTypeList[0].value
                 }else {
                      mydata_encoded =  this.codifyTypeList[1].value
                 }
            }
            
            this.modbusItemObj = {
                "name":"",
                "data_name":"",
                "data_type":datatype,
                "data_encoded":mydata_encoded,
                "coefficient":"0",
                "codify_type":datatype2,
                "collect_coef":"0",
                "area_addr":"0",
                "data_len":"2",
                "sort":sort,
                "offset":"0",
                "memory_cycle":"300",
                "app_type_group":app_type_group,
                "app_type":app_typeArr.length == 0 ? "" : app_typeArr[0].code,
                "app_type":0,
                "decimal":"0",
                "event_over_limit":0,
                "event_alert_type":0,
                "zero":"0",
                "start_bit":"0",
                "end_bit":"8",
                "max_value":"0",
                "min_value":"0",
                "modbus_area_id":this.nowLeftAreaRow.id
            }
            this.attributeListValue = ['save','audio_alarm','sampling']
            this.shujuxiang = true
        },
        //选择需要插入位置的数据点
        dataDianFn(row){
          this.nowInsertData = row
        },
        //插入数据点
        insertDataPoints(){
           if(Object.keys(this.nowInsertData).length === 0){
              this.$message({showClose: true,message: '请选择需要插入的数据项',type: 'warning'});
              return
           }
        //    console.log("测试",this.nowInsertData);
           var mynum = this.nowInsertData.sort
           mynum++
           this.addDataDian('插入',mynum)

        },
        //选择数据项
        handleSelectionChange(val){
            this.multipleSelection = val
        },
        //批量删除
        delMordfn(){
            if(this.multipleSelection.length === 0){
                this.$message({showClose: true,message: '请选择需要删除的数据项',type: 'warning'});
                return
            }
            this.$confirm(`确定要删除选中的数据项吗？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                var arr1 = []
                this.multipleSelection.forEach(item => arr1.push(item.id))
                if(this.nowZixilieRow.serial_type == 2){
                    delModbusItembatchDeleteCommon({ids:arr1}).then(res => {
                        if(res.code == 200){
                            this.getDataDian(this.nowLeftAreaRow)
                            this.$message({showClose: true,message: '删除成功',type: 'success'});
                        }else {
                            this.$message.error('删除失败！！')
                        }
                    })
                }else {
                    delModbusItembatchDelete({ids:arr1}).then(res => {
                        if(res.code == 200){
                            this.getDataDian(this.nowLeftAreaRow)
                            this.$message({showClose: true,message: '删除成功',type: 'success'});
                        }else {
                            this.$message.error('删除失败！！')
                        }
                    })
                }
              
        
                      
            }).catch(() => {
              // ...
            });

        },

        //修改数据点
        editModbusItem_fn(row){
            var shuxingArr = []
            if(row.save == 1){
                shuxingArr.push('save')
            }
            if(row.audio_alarm == 1){
                shuxingArr.push('audio_alarm')
            }
            if(row.alarm_print == 1){
                shuxingArr.push('alarm_print')
            }
            if(row.manual_value == 1){
                shuxingArr.push('manual_value')
            }
            if(row.reverse == 1){
                shuxingArr.push('reverse')
            }
            if(row.value_check == 1){
                shuxingArr.push('value_check')
            }
            if(row.change_tip == 1){
                shuxingArr.push('change_tip')
            }
            if(row.sampling == 1){
                shuxingArr.push('sampling')
            }
             if(row.app_type_group != ""){
                this.getApplicationTypefn(row.app_type_group)
            }
            if(row.app_type_group === 0){
                this.getApplicationTypefn(row.app_type_group)
            }
            this.nowAddOrEditdian = `修改数据项(${row.name})`
             this.attributeListValue = shuxingArr
             this.modbusItemObj = JSON.parse(JSON.stringify(row))
             this.shujuxiang = true
        },
        //添加修改右侧数据点
        saveRightDataDian(){
            //   console.log("右侧数据点",this.modbusItemObj);
              if(this.modbusItemObj.data_type === ""){
                    this.$message({showClose: true,message: '请选择数据类型',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.codify_type === ""){
                    this.$message({showClose: true,message: '请选择采集类型',type: 'warning'});
                     return
              }
              if(this.modbusItemObj.app_type_group === ""){
                    this.$message({showClose: true,message: '请选择应用类型组',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.app_type === ""){
                    this.$message({showClose: true,message: '请选择应用类型',type: 'warning'});
                    return
              }
               if(this.modbusItemObj.app_type === ""){
                    this.$message({showClose: true,message: '请选择应用类型',type: 'warning'});
                    return
              }
               if(this.modbusItemObj.max_value === ""){
                    this.$message({showClose: true,message: '最大合理值不能为空',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.min_value === ""){
                    this.$message({showClose: true,message: '最小合理值不能为空',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.decimal === ""){
                    this.$message({showClose: true,message: '小数点位不能为空',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.coefficient === ""){
                    this.$message({showClose: true,message: '转换系数不能为空',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.offset === ""){
                    this.$message({showClose: true,message: '偏移量不能为空',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.zero === ""){
                    this.$message({showClose: true,message: '零死区不能为空',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.memory_cycle === ""){
                    this.$message({showClose: true,message: '存储周期不能为空',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.event_over_limit === ""){
                    this.$message({showClose: true,message: '请选择越限类型',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.event_alert_type === ""){
                    this.$message({showClose: true,message: '请选择报警类型',type: 'warning'});
                    return
              }
              if(this.modbusItemObj.sort === ""){
                                this.$message({showClose: true,message: '排序不能为空',type: 'warning'});
                                return
              }
               var d = {
                        "area_id":Number(this.nowLeftAreaRow.id),//数据区ID
                        "serial_id":Number(this.nowZixilieRow.id),//子系列ID
                        "data_type":Number(this.modbusItemObj.data_type),
                        "app_type_group":Number(this.modbusItemObj.app_type_group),
                        "app_type":Number(this.modbusItemObj.app_type),
                        "max_value":Number(this.modbusItemObj.max_value),
                        "min_value":Number(this.modbusItemObj.min_value),
                        "decimal":Number(this.modbusItemObj.decimal),
                        "coefficient":Number(this.modbusItemObj.coefficient),
                        "offset":Number(this.modbusItemObj.offset),
                        "zero":Number(this.modbusItemObj.zero),
                        "memory_cycle":Number(this.modbusItemObj.memory_cycle),
                        "event_over_limit":Number(this.modbusItemObj.event_over_limit),
                        "event_alert_type":Number(this.modbusItemObj.event_alert_type),
                        "sort":Number(this.modbusItemObj.sort),
                        "codify_type":Number(this.modbusItemObj.codify_type),
                       //   'collect_coef':this.modbusItemObj.collect_coef,
                    }
                    // this.attributeListValue.forEach(item => {
                    //     d[item] = 1
                    // })
                     if(this.nowZixilieRow.serial_type == 2){ // 通用设备 
                         if(this.modbusItemObj.name === ""){
                                this.$message({showClose: true,message: '数据项名称不能为空',type: 'warning'});
                                return
                        } 
                         d.name = this.modbusItemObj.name
                     }else {//Modbus设备
                         if(this.modbusItemObj.start_bit === ""){
                                this.$message({showClose: true,message: '开始位不能为空',type: 'warning'});
                                return
                        }
                        if(this.modbusItemObj.end_bit === ""){
                                this.$message({showClose: true,message: '结束位不能为空',type: 'warning'});
                                return
                        }
                        
                        if(this.modbusItemObj.area_addr === ""){
                                this.$message({showClose: true,message: '区内地址不能为空',type: 'warning'});
                                return
                        }
                        if(this.modbusItemObj.data_len === ""){
                                this.$message({showClose: true,message: '数据长度不能为空',type: 'warning'});
                                return
                        }
                        if(this.modbusItemObj.data_encoded === ""){
                                this.$message({showClose: true,message: '请选择数据编码',type: 'warning'});
                                return
                        }
                        
                        if(this.modbusItemObj.data_name === ""){
                                this.$message({showClose: true,message: '数据项名称不能为空',type: 'warning'});
                                return
                        }
                        if(this.modbusItemObj.collect_coef === ""){
                                this.$message({showClose: true,message: '采集系数不能为空',type: 'warning'});
                                return
                        }
                         d.start_bit = Number(this.modbusItemObj.start_bit),
                         d.end_bit = Number(this.modbusItemObj.end_bit),
                         d.area_addr = Number(this.modbusItemObj.area_addr),
                         d.data_len = Number(this.modbusItemObj.data_len),
                         d.data_encoded = Number(this.modbusItemObj.data_encoded),
                         d.data_name = this.modbusItemObj.data_name
                         d.collect_coef = Number(this.modbusItemObj.collect_coef)
                         d.data_number = this.rightTableCopy.length
                     }
                    
                    var findShux = []
                    this.attributeList.forEach(item => {
                          findShux = this.attributeListValue.filter(tt => tt == item.value)
                          if(findShux.length == 0){
                            d[item.value] = 0
                          }else {
                            d[item.value] = 1
                          }
                    })
              if(this.nowAddOrEditdian != '新增数据项' && this.nowAddOrEditdian != '插入数据项'){//修改
                  d.id = Number(this.modbusItemObj.id)
                    // this.diaisMask = true
                      if(this.nowZixilieRow.serial_type == 2){ // 通用设备  
                        //   console.log("修改数据区",d);
                        //   return
                          editTongItem(d).then(res => {
                                //   
                                this.diaisMask = false
                                if(res.code == 200){
                                    this.shujuxiang = false
                                    this.leaveFlag = true
                                    this.getDataDian(this.nowLeftAreaRow)
                                    this.$message({showClose: true,message: '修改成功',type: 'success'});
                                }else {
                                    this.$message({showClose: true,message: '修改失败',type: 'error'});
                                }
                            }).catch(() => {
                                this.diaisMask = false
                            })
                     }else {
                          editModbusItem(d).then(res => {
                                //   console.log("修改数据区",res);
                                this.diaisMask = false
                                if(res.code == 200){
                                    this.shujuxiang = false
                                      this.getDataDian(this.nowLeftAreaRow)
                                      this.leaveFlag = true
                                    this.$message({showClose: true,message: '修改成功',type: 'success'});
                                }else {
                                    this.$message({showClose: true,message: '修改失败',type: 'error'});
                                }
                            }).catch(() => {
                                this.diaisMask = false
                            })
                     }
                    
                 
              }else {//新增
                    // console.log("attributeListValue",this.attributeListValue);
                    // console.log("attributeList",this.attributeList);
                    this.diaisMask = true
                     if(this.nowZixilieRow.serial_type == 2){ // 通用设备  
                                addTongItem(d).then(res => {
                                this.diaisMask = false
                                //   console.log("新增数据区",res);
                                //   成功添加一个modbus数据点
                                if(res.code == 200){
                                    this.shujuxiang = false
                                      this.getDataDian(this.nowLeftAreaRow)
                                      this.leaveFlag = true
                                    this.$message({showClose: true,message: '新增成功',type: 'success'});
                                }else {
                                    this.$message({showClose: true,message: '新增失败',type: 'error'});
                                }
                            }).catch(() => {
                                this.diaisMask = false
                            })
                     }else {
                         addModbusItem(d).then(res => {
                                this.diaisMask = false
                                //   console.log("新增数据区",res);
                                //   成功添加一个modbus数据点
                                if(res.code == 200){
                                    this.shujuxiang = false
                                      this.getDataDian(this.nowLeftAreaRow)
                                      this.leaveFlag = true
                                    this.$message({showClose: true,message: '新增成功',type: 'success'});
                                }else {
                                    this.$message({showClose: true,message: '新增失败',type: 'error'});
                                }
                            }).catch(() => {
                                this.diaisMask = false
                            })
                     }
                  
              }
        },
        
        //删除右侧数据点
        delModbusItem_fn(row){
             this.$confirm(`是否要删除此项？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.isMask = true
                if(this.nowZixilieRow.serial_type == 2){ // 通用设备
                     delTongItem(row.id).then(res => {
                        this.isMask = false
                        if(res.code == 200){
                            this.leaveFlag = true
                            this.$message({showClose: true,message: '删除成功',type: 'success'});
                            this.getDataDian(this.nowLeftAreaRow)
                        }else {
                            this.$message.error('删除失败！！')
                        }
                    }).catch(error => {
                            this.$message.error('删除失败！！')
                            this.isMask = false
                    })
                }else {
                     delModbusItem(row.id).then(res => {
                            this.isMask = false
                            if(res.code == 200){
                                this.leaveFlag = true
                                this.$message({showClose: true,message: '删除成功',type: 'success'});
                                this.getDataDian(this.nowLeftAreaRow)
                            }else {
                                this.$message.error('删除失败！！')
                            }
                        }).catch(error => {
                                this.$message.error('删除失败！！')
                                this.isMask = false
                        })
                }
               
              
        
                      
            }).catch(() => {
              // ...
            });
        },


    },
};
</script>

<style lang="scss" scoped>
.mytitle {
                 width: 100%;
                 height: 36px;
                 background-color: #F0F5FF;
                 border-radius: 4px;
                 display: flex;
                 align-items: center;
                 margin-top: 12px;
                 color: #000;
                //  font-weight: bold;
                 font-size: 15px;
                 span {
                     display: inline-block;
                     width: 3px;
                     height: 18px;
                     background-color: #2178F1;
                     margin-left: 12px;
                     margin-right: 6px;
                     border-radius: 3px;
                 }
        }
.bot-btn {
             width: 100%;
             height: 47px;
            //  margin-top: 44px;
             border-top: 1px solid #E6E6E6;
             .scr-div {
                width: 100%;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: space-between;
             }
             
        }
.variableediting {
     position: relative;
     overflow: hidden;
}
.topcon  { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-nav {
         display: flex;
         .nav-item {
             width: 96px;
             height: 34px;
             text-align: center;
             line-height: 36px;
             cursor: pointer;
             border: 1px solid #E6E6E6;
             color: #666666;
             
             &.active {
                 background-color: #fff;
                 color: #1A1A1A;
                 border-color: transparent;
             }
         }
    }
   
}
.mybtn {
     cursor: pointer;
}
:deep(.el-dialog__close svg){
     top: 4px !important;
}
.shujuqu {
     .leftname {
         width: 115px !important;
         min-width: 115px !important;
     }
}
.shujuxiang {
     .infoitems {
         margin-top: 0px !important;
     }
     .shuxing {
         width: 100% !important;
         :deep(.el-select) {
             width: 100%;
         }
     }
     .leftname {
         width: 115px !important;
         min-width: 115px !important;
     }
}
.addpiliang {
     .leftname {
         width: 80px !important;
         min-width: 80px !important;
     }
}
 .right-btn { 
        display: flex;

        .btn-item {
             width: 88px;
             height: 28px;
             text-align: center;
             line-height: 28px;
             font-size: 12px;
             border-radius: 4px;
             cursor: pointer;
             background-color: #E7F0FF;
             border: 1px solid #2178F1;
             color: #2178F1;
             box-sizing: border-box;
             cursor: pointer;
            
        }
        .del-btn {
                border: 1px solid #EE422B;
                color: #EE422B;
                background-color: transparent;
                margin-left: 8px;
        }
        .item1 {
              margin-left: 8px;
        }

    }
.con {
     width: 100%;
     height: calc(100% - 36px);
     background-color: #fff;
     box-sizing: border-box;
     padding: 12px 12px 0px 12px;
     display: flex;
     position: relative;
     .tree-top {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            span {
                font-size: 12px;
                color: #666666;
            }
            .ri-btn {
                display: flex;

                 div {
                     padding: 6px 8px;
                     border-radius: 4px;
                     background-color: #2178F1;
                     color: #fff;
                     font-size: 12px;
                     cursor: pointer;
                 }
            }


         }
     .left-tree {
         width: 393px;
         height: 100%;
         border-right: 1px solid #E6E6E6;
         padding-right: 12px;
         box-sizing: border-box;
         .custom-tree-node {
            width: 100%;
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding-right: 9px;
             .treeimg {
                 display: none;
             }
             &:hover {
                 .treeimg {
                        display: block;
                    }
             }
             img {
                width: 16px;
                height: 16px;
                margin-right: 0px;
             }
         }
         

     }
     .right-table {
         width: calc(100% - 393px);
         height: calc(100% - 36px);
         padding: 0px 0px 12px 12px;
         box-sizing: border-box;
        .mi-table {
               width: 100%;
                height: calc(100% - 24px);
                 box-sizing: border-box;
                 .mysort {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                 }
                 :deep(.el-table__fixed-right) {
                         bottom: 9px !important;
                 }
                 :deep(.el-switch.is-checked .el-switch__core) {
                     width: 24px !important;
                     height: 12px;
                 }
                 :deep(.el-switch__core ){
                       width: 24px !important;
                     height: 12px;
                 }
                 :deep(.el-switch.is-checked .el-switch__core::after) {
                     margin-left: -10px;
                 }
                 :deep(.el-switch__core:after ){
                          top: 0px;
                          width: 10px;
                          height: 10px;
                 }
             }
     
      
     }

}
.quxiao {
                        //  margin-left: 8px;
                         color: #666666;
                         background-color: #fff;
                         border: 1px solid #cccccc;
}
:deep(.el-dialog__header ){
     border-bottom: 1px solid #E6E6E6;
}
:deep(.el-radio) {
    position: relative;
    top: 1px;
}

.mydiodiv {
     display: flex;
     align-items: center;
     .dioleftname {
         white-space: nowrap;
         margin-right: 8px;
         color: #666666;
     }
     .rightname {
         white-space: nowrap;
         color: #666666;
         margin-left:8px
     }
     .dioleftname1 {
        width: 55px;
        text-align: right;
     }
}
.con2 {
     width: 100%;
     height: 100%;
     background-color: #fff;
     .datatop {
         width: 100%;
         height: 52px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         border-bottom: 1px solid #E6E6E6;
         .lefts {
             color: #1A1A1A;
             font-size: 14px;
             display: flex;
             align-items: center;
             span {
                 display: inline-block;
                 width: 68px;
                 height: 24px;
                 text-align: center;
                 line-height: 24px;
                 background-color: #F5F5F5;
                 border-radius: 4px;
                 font-size: 13px;
                 color: #333333;
                 margin: 0px 12px;
             }
         }
         .right-btn {
             margin-right: 12px;
         }
     }
     .con2data {
         width: 100%;
         height: calc(100% - 52px);
        display: flex;
        .smalltitle {
             width: 100%;
             height: 28px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 0px 12px;
             box-sizing: border-box;
             font-size: 12px;
             color: #666666;
             margin: 12px 0px;

        }
        .dataleft {
             width: 310px;
             height: 100%;
             border-right: 1px solid #E6E6E6;
             overflow: hidden;
             .leftcon {
                 width: 100%;
                 height: calc(100% - 60px);
                 padding: 0px 12px;
                 box-sizing: border-box;
             }
        }
        .dataright {
             width: calc(100% - 310px);
             padding: 12px;
             box-sizing: border-box;
             height: 100%;
             .mytable {
                 width: 100%;
                 height: calc(100% - 65px);

             }
             .bottom-con {
                 width: 100%;
                 height: 320px;
                 margin-top: 16px;
                 padding: 12px 20px;
                 box-sizing: border-box;
                 background-color: #FAFAFA;
                 border: 1px solid #E6E6E6;
                 border-radius: 4px;
                 .editcon {
                     width: 100%;
                     height: calc(100% - 30px);
                     .edititem {
                         display: flex;
                         flex-wrap: wrap;
                         :deep(.el-input__inner) {
                             height: 28px;
                             line-height: 28px;
                             background-color: transparent;
                         }
                         .items {
                              height: 36px;
                              display: flex;
                              align-items: center;
                              margin-right: 39px;
                                .leftname {
                                    width: 65px;
                                    text-align: right;
                                    font-size: 12px;
                                    color: #666666;
                                    margin-right: 8px;

                                }
                         }
                        
                     }
                 }
                   .bottom-btn {
                     width: 100%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     .quxiao {
                        //  margin-left: 8px;
                         color: #666666;
                         background-color: #fff;
                         border: 1px solid #cccccc;
                     }
                }
             }
        }
     }
}
.leftitems {
     width: 100%;
     margin-bottom: 15px;
     .toptitle {
         width: 100%;
         height: 41px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         background-color: #F5F5F5;
         border-radius: 4px;
         padding: 0px 12px;
         box-sizing: border-box;
         .tname {
              display: flex;
            align-items: center;
            span {
                 color: #1A1A1A;
                 font-size: 13px;
                 margin-left: 4px;
            }
         }
         .img11 {
             display: none;
         }
         
         &.active {
             background-color: #E7F0FF;
             .tname {
                
                 span {
                     color: #2178F1;
                 }
             }
             
         }
         &:hover {
             .img11 {
                 display: block;
             }
         }
     }
     .showcon  {
         width: 100%;
        //  height: 397px;
         background-color: #fafafa;
         border: 1px solid #E6E6E6;
         border-radius: 4px;
         margin-top: 6px;
         box-sizing: border-box;
         .showinput {
             width: 100%;
             height: calc(100% - 40px);
             padding: 0px 12px;
             box-sizing: border-box;
             .input-item {
                 width: 100%;
                 height: 44px;
                 display: flex;
                 align-items: center;
                 .names {
                     min-width: 60px;
                     white-space: nowrap;
                     color: #666;
                     font-size: 12px;
                     margin-right: 8px;
                     text-align: right;
                 }
                 :deep(.el-input__inner) {
                         height: 28px;
                        line-height: 28px;
                     background-color: transparent;
                 }
                 .dioleftname {
                     color: #666;
                     font-size: 12px;
                     margin-left: 8px;
                 }

             }
         }
         .showbtn {
             width: 100%;
             height: 40px;
             display: flex;
             align-items: center;
             justify-content: flex-end;
             font-size: 12px;
             color: #2178F1;
             border-top: 1px solid #E6E6E6;
             span {
                //  margin-left: 20px;
                 cursor: pointer;
             }
         }
     }
}
</style>